stream-chat-react-native-core 5.23.1 → 5.23.2-beta.1

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,20 +1,29 @@
-import React from 'react';
-import { FlatList, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import {
+  LayoutChangeEvent,
+  Pressable,
+  PressableProps,
+  PressableStateCallbackType,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';
 import type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';
 
 import {
-  isSuggestionCommand,
-  isSuggestionEmoji,
   isSuggestionUser,
   Suggestion,
   SuggestionsContextValue,
   useSuggestionsContext,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { FlatList } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
+const AUTO_COMPLETE_SUGGESTION_LIST_HEADER_HEIGHT = 30;
+
 type AutoCompleteSuggestionListComponentProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<SuggestionsContextValue, 'queryText' | 'triggerType'> & {
@@ -31,9 +40,19 @@ export type AutoCompleteSuggestionListPropsWithContext<
 > &
   AutoCompleteSuggestionListComponentProps<StreamChatGenerics>;
 
-const SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {
-  const { children, ...touchableOpacityProps } = props;
-  return <TouchableOpacity {...touchableOpacityProps}>{children}</TouchableOpacity>;
+const SuggestionsItem: React.FC<PressableProps> = (props) => {
+  const { children, style: propsStyle, ...pressableProps } = props;
+
+  const style = ({ pressed }: PressableStateCallbackType) => [
+    propsStyle as ViewStyle,
+    { opacity: pressed ? 0.2 : 1 },
+  ];
+
+  return (
+    <Pressable {...pressableProps} style={style}>
+      {children}
+    </Pressable>
+  );
 };
 
 SuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';
@@ -43,6 +62,7 @@ export const AutoCompleteSuggestionListWithContext = <
 >(
   props: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
 ) => {
+  const [itemHeight, setItemHeight] = useState<number>(0);
   const {
     active,
     AutoCompleteSuggestionHeader,
@@ -55,6 +75,7 @@ export const AutoCompleteSuggestionListWithContext = <
 
   const {
     theme: {
+      colors: { white },
       messageInput: {
         container: { maxHeight },
         suggestions: { item: itemStyle },
@@ -63,62 +84,37 @@ export const AutoCompleteSuggestionListWithContext = <
     },
   } = useTheme();
 
-  const renderItem = ({ index, item }: { index: number; item: Suggestion<StreamChatGenerics> }) => {
+  const flatlistHeight = useMemo(() => {
+    let totalItemHeight;
+    if (triggerType === 'emoji') {
+      totalItemHeight = data.length < 7 ? data.length * itemHeight : itemHeight * 6;
+    } else {
+      totalItemHeight = data.length < 4 ? data.length * itemHeight : itemHeight * 3;
+    }
+
+    return triggerType === 'emoji' || triggerType === 'command'
+      ? totalItemHeight + AUTO_COMPLETE_SUGGESTION_LIST_HEADER_HEIGHT
+      : totalItemHeight;
+  }, [itemHeight, data.length]);
+
+  const renderItem = ({ item }: { item: Suggestion<StreamChatGenerics> }) => {
     switch (triggerType) {
-      case 'mention':
-        if (isSuggestionUser(item)) {
-          return (
-            <SuggestionsItem
-              onPress={() => {
-                onSelect(item);
-              }}
-              style={[
-                {
-                  paddingBottom: index === data.length - 1 ? 8 : 0,
-                  paddingTop: index === 0 ? 8 : 0,
-                },
-                itemStyle,
-              ]}
-            >
-              {AutoCompleteSuggestionItem && (
-                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
-              )}
-            </SuggestionsItem>
-          );
-        }
-        return null;
       case 'command':
-        if (isSuggestionCommand(item)) {
-          return (
-            <SuggestionsItem
-              onPress={() => {
-                onSelect(item);
-              }}
-              style={[itemStyle]}
-            >
-              {AutoCompleteSuggestionItem && (
-                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
-              )}
-            </SuggestionsItem>
-          );
-        }
-        return null;
+      case 'mention':
       case 'emoji':
-        if (isSuggestionEmoji(item)) {
-          return (
-            <SuggestionsItem
-              onPress={() => {
-                onSelect(item);
-              }}
-              style={[itemStyle]}
-            >
-              {AutoCompleteSuggestionItem && (
-                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
-              )}
-            </SuggestionsItem>
-          );
-        }
-        return null;
+        return (
+          <SuggestionsItem
+            onLayout={(event: LayoutChangeEvent) => setItemHeight(event.nativeEvent.layout.height)}
+            onPress={() => {
+              onSelect(item);
+            }}
+            style={itemStyle}
+          >
+            {AutoCompleteSuggestionItem && (
+              <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
+            )}
+          </SuggestionsItem>
+        );
       default:
         return null;
     }
@@ -127,20 +123,22 @@ export const AutoCompleteSuggestionListWithContext = <
   if (!active || data.length === 0) return null;
 
   return (
-    <FlatList
-      data={data}
-      keyboardShouldPersistTaps='always'
-      keyExtractor={(item, index) =>
-        `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`
-      }
-      ListHeaderComponent={
-        AutoCompleteSuggestionHeader ? (
-          <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />
-        ) : null
-      }
-      renderItem={renderItem}
-      style={[flatlist, { maxHeight }]}
-    />
+    <View style={[styles.container, { backgroundColor: white, height: flatlistHeight }]}>
+      <FlatList
+        data={data}
+        keyboardShouldPersistTaps='always'
+        keyExtractor={(item, index) =>
+          `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`
+        }
+        ListHeaderComponent={
+          AutoCompleteSuggestionHeader ? (
+            <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />
+          ) : null
+        }
+        renderItem={renderItem}
+        style={[flatlist, { maxHeight }]}
+      />
+    </View>
   );
 };
 
@@ -206,5 +204,16 @@ export const AutoCompleteSuggestionList = <
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    elevation: 3,
+    marginHorizontal: 8,
+    marginVertical: 8,
+    shadowOffset: { height: 1, width: 0 },
+    shadowOpacity: 0.15,
+  },
+});
+
 AutoCompleteSuggestionList.displayName =
   'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';

package/src/components/MessageInput/MessageInput.tsx

@@ -73,13 +73,8 @@ const styles = StyleSheet.create({
   replyContainer: { paddingBottom: 12, paddingHorizontal: 8 },
   sendButtonContainer: { paddingBottom: 10, paddingLeft: 10 },
   suggestionsListContainer: {
-    borderRadius: 10,
-    elevation: 3,
-    left: 8,
     position: 'absolute',
-    right: 8,
-    shadowOffset: { height: 1, width: 0 },
-    shadowOpacity: 0.15,
+    width: '100%',
   },
 });
 
@@ -624,11 +619,7 @@ const MessageInputWithContext = <
 
       {triggerType && suggestions ? (
         <View
-          style={[
-            suggestionListContainer,
-            styles.suggestionsListContainer,
-            { backgroundColor: white, bottom: height },
-          ]}
+          style={[styles.suggestionsListContainer, suggestionListContainer, { bottom: height }]}
         >
           <AutoCompleteSuggestionList
             active={!!suggestions}

package/src/i18n/en.json

@@ -24,7 +24,7 @@
   "File type not supported": "File type not supported",
   "Flag": "Flag",
   "Flag Message": "Flag Message",
-  "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged.",
+  "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged",
   "How about sending your first message to a friend?": "How about sending your first message to a friend?",
   "Instant Commands": "Instant Commands",
   "Let's start chatting!": "Let's start chatting!",

package/src/i18n/fr.json

@@ -1,76 +1,76 @@
 {
-  "1 Reply": "1 Réponse",
+  "1 Reply": "",
   "1 Thread Reply": "Réponse à 1 fil",
-  "Allow access to your Gallery": "Autoriser l'accès à votre galerie",
-  "Allow camera access in device settings": "Autoriser l'accès à la caméra dans les paramètres de l'appareil",
-  "Also send to channel": "Envoyer également à la chaîne",
-  "Are you sure you want to permanently delete this message?": "Êtes-vous sûr de vouloir supprimer définitivement ce message?",
-  "Block User": "Bloquer un utilisateur",
-  "Cancel": "Annuler",
-  "Cannot Flag Message": "Impossible de signaler le message",
-  "Copy Message": "Copier le message",
-  "Delete": "Supprimer",
-  "Delete Message": "Supprimer un message",
-  "Device camera is used to take photos or videos.": "L'appareil photo de l'appareil est utilisé pour prendre des photos ou des vidéos.",
-  "Do you want to send a copy of this message to a moderator for further investigation?": "Voulez-vous envoyer une copie de ce message à un modérateur pour une enquête plus approfondie?",
-  "Edit Message": "Éditer un message",
-  "Editing Message": "Édite un message",
+  "Allow access to your Gallery": "",
+  "Allow camera access in device settings": "",
+  "Also send to channel": "",
+  "Are you sure you want to permanently delete this message?": "",
+  "Block User": "",
+  "Cancel": "",
+  "Cannot Flag Message": "",
+  "Copy Message": "",
+  "Delete": "",
+  "Delete Message": "",
+  "Device camera is used to take photos or videos.": "",
+  "Do you want to send a copy of this message to a moderator for further investigation?": "",
+  "Edit Message": "",
+  "Editing Message": "",
   "Emoji matching": "Correspondance Emoji",
-  "Empty message...": "Message vide...",
-  "Error loading": "Erreur lors du chargement",
-  "Error loading channel list...": "Erreur lors du chargement de la liste de canaux...",
-  "Error loading messages for this channel...": "Erreur lors du chargement des messages de ce canal...",
-  "Error while loading, please reload/refresh": "Erreur lors du chargement, veuillez recharger/rafraîchir",
+  "Empty message...": "",
+  "Error loading": "",
+  "Error loading channel list...": "",
+  "Error loading messages for this channel...": "",
+  "Error while loading, please reload/refresh": "",
   "File type not supported": "Le type de fichier n'est pas pris en charge",
-  "Flag": "Signaler",
-  "Flag Message": "Signaler le message",
-  "Flag action failed either due to a network issue or the message is already flagged": "L'action de signalisation a échoué en raison d'un problème de réseau ou le message est déjà signalé.",
-  "How about sending your first message to a friend?": "Et si vous envoyiez votre premier message à un ami ?",
+  "Flag": "",
+  "Flag Message": "",
+  "Flag action failed either due to a network issue or the message is already flagged": "",
+  "How about sending your first message to a friend?": "",
   "Instant Commands": "Commandes Instantanées",
-  "Let's start chatting!": "Commençons à discuter !",
+  "Let's start chatting!": "",
   "Links are disabled": "Links are disabled",
-  "Loading channels...": "Chargement des canaux...",
-  "Loading messages...": "Chargement des messages...",
-  "Loading...": "Chargement...",
+  "Loading channels...": "",
+  "Loading messages...": "",
+  "Loading...": "",
   "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "Taille maximale de téléchargement de fichier atteinte. Veuillez télécharger un fichier inférieur à {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} Mo.",
-  "Message Reactions": "Réactions aux messages",
-  "Message deleted": "Message supprimé",
-  "Message flagged": "Message signalé",
-  "Mute User": "Utilisateur muet",
-  "Not supported": "Non pris en charge",
-  "Nothing yet...": "Aucun message...",
-  "Ok": "Ok",
-  "Only visible to you": "Seulement visible par vous",
-  "Open Settings": "Ouvrir les paramètres",
-  "Photo": "Photo",
-  "Photos and Videos": "Photos et vidéos",
-  "Pin to Conversation": "Épingler à la conversation",
+  "Message Reactions": "",
+  "Message deleted": "",
+  "Message flagged": "",
+  "Mute User": "",
+  "Not supported": "",
+  "Nothing yet...": "",
+  "Ok": "",
+  "Only visible to you": "",
+  "Open Settings": "",
+  "Photo": "",
+  "Photos and Videos": "",
+  "Pin to Conversation": "",
   "Pinned by": "Épinglé par",
-  "Please enable access to your photos and videos so you can share them.": "Veuillez autoriser l'accès à vos photos et vidéos afin de pouvoir les partager.",
+  "Please enable access to your photos and videos so you can share them.": "",
   "Please select a channel first": "Veuillez d'abord selectionnez un canal",
-  "Reconnecting...": "Se Reconnecter...",
-  "Reply": "Répondre",
-  "Reply to Message": "Répondre au message",
-  "Resend": "Renvoyer",
-  "Search GIFs": "Rechercher des GIF",
-  "Select More Photos": "Sélectionner plus de photos",
-  "Send a message": "Envoyer un message",
+  "Reconnecting...": "",
+  "Reply": "",
+  "Reply to Message": "",
+  "Resend": "",
+  "Search GIFs": "",
+  "Select More Photos": "",
+  "Send a message": "",
   "Sending links is not allowed in this conversation": "Sending links is not allowed in this conversation",
-  "Slow mode ON": "Mode lent activé",
-  "The message has been reported to a moderator.": "Le message a été signalé à un modérateur.",
-  "Thread Reply": "Réponse à la discussion",
-  "Unblock User": "Débloquer Utilisateur",
-  "Unknown User": "Utilisateur inconnu",
-  "Unmute User": "Activer le son de Utilisateur",
-  "Unpin from Conversation": "Décrocher de la conversation",
-  "Unread Messages": "Messages non lus",
-  "Video": "Vidéo",
-  "You": "Toi",
+  "Slow mode ON": "",
+  "The message has been reported to a moderator.": "",
+  "Thread Reply": "",
+  "Unblock User": "",
+  "Unknown User": "",
+  "Unmute User": "",
+  "Unpin from Conversation": "",
+  "Unread Messages": "",
+  "Video": "",
+  "You": "",
   "You can't send messages in this channel": "You can't send messages in this channel",
-  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} et {{ nonSelfUserLength }} autres sont en train d'écrire",
-  "{{ index }} of {{ photoLength }}": "{{ index }} sur {{ photoLength }}",
-  "{{ replyCount }} Replies": "{{ replyCount }} Réponses",
+  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "",
+  "{{ index }} of {{ photoLength }}": "",
+  "{{ replyCount }} Replies": "",
   "{{ replyCount }} Thread Replies": "{{replyCount}} Réponses à la discussion",
-  "{{ user }} is typing": "{{ user }} est en train d'écrire",
-  "🏙 Attachment...": "🏙 Pièce jointe..."
+  "{{ user }} is typing": "",
+  "🏙 Attachment...": ""
 }

package/src/i18n/hi.json

@@ -1,76 +1,76 @@
 {
-  "1 Reply": "1 रिप्लाई",
+  "1 Reply": "",
   "1 Thread Reply": "1 धागा उत्तर",
-  "Allow access to your Gallery": "अपनी गैलरी तक पहुँचने की अनुमति दें",
-  "Allow camera access in device settings": "डिवाइस सेटिंग्स में कैमरा एक्सेस की अनुमति दें",
-  "Also send to channel": "चैनल को भी भेजें",
-  "Are you sure you want to permanently delete this message?": "क्या आप वाकई इस संदेश को स्थायी रूप से हटाना चाहते हैं?",
-  "Block User": "उपयोगकर्ता को रोक देना, ब्लॉक यूजर",
-  "Cancel": "रद्द करें",
-  "Cannot Flag Message": "मैसेज फ्लैग नहीं किया जा सकता है",
-  "Copy Message": "संदेश की प्रतिलिपि बनाएँ",
-  "Delete": "हटाएं",
-  "Delete Message": "मैसेज को डिलीट करे",
-  "Device camera is used to take photos or videos.": "डिवाइस कैमरे का उपयोग फ़ोटो या वीडियो लेने के लिए किया जाता है।",
-  "Do you want to send a copy of this message to a moderator for further investigation?": "क्या आप इस संदेश की एक प्रति आगे की जाँच के लिए किसी मॉडरेटर को भेजना चाहते हैं?",
-  "Edit Message": "मैसेज में बदलाव करे",
-  "Editing Message": "मैसेज बदला जा रहा है",
+  "Allow access to your Gallery": "",
+  "Allow camera access in device settings": "",
+  "Also send to channel": "",
+  "Are you sure you want to permanently delete this message?": "",
+  "Block User": "",
+  "Cancel": "",
+  "Cannot Flag Message": "",
+  "Copy Message": "",
+  "Delete": "",
+  "Delete Message": "",
+  "Device camera is used to take photos or videos.": "",
+  "Do you want to send a copy of this message to a moderator for further investigation?": "",
+  "Edit Message": "",
+  "Editing Message": "",
   "Emoji matching": "इमोजी मिलान",
-  "Empty message...": "खाली संदेश...",
-  "Error loading": "लोड होने मे त्रुटि",
-  "Error loading channel list...": "चैनल सूची लोड करने में त्रुटि...",
-  "Error loading messages for this channel...": "इस चैनल के लिए मेसेजेस लोड करने में त्रुटि हुई...",
-  "Error while loading, please reload/refresh": "एरर, रिफ्रेश करे",
+  "Empty message...": "",
+  "Error loading": "",
+  "Error loading channel list...": "",
+  "Error loading messages for this channel...": "",
+  "Error while loading, please reload/refresh": "",
   "File type not supported": "फ़ाइल प्रकार समर्थित नहीं है",
-  "Flag": "झंडा",
-  "Flag Message": "झंडा संदेश",
-  "Flag action failed either due to a network issue or the message is already flagged": "फ़्लैग कार्रवाई या तो नेटवर्क समस्या के कारण विफल हो गई या संदेश पहले से फ़्लैग किया गया है।",
-  "How about sending your first message to a friend?": "किसी मित्र को अपना पहला संदेश भेजने के बारे में क्या ख़याल है?",
+  "Flag": "",
+  "Flag Message": "",
+  "Flag action failed either due to a network issue or the message is already flagged": "",
+  "How about sending your first message to a friend?": "",
   "Instant Commands": "त्वरित कमांड",
-  "Let's start chatting!": "आइए चैट करना शुरू करें!",
+  "Let's start chatting!": "",
   "Links are disabled": "लिंक अक्षम हैं",
-  "Loading channels...": "चैनल लोड हो रहे हैं...",
-  "Loading messages...": "मेसेजस लोड हो रहे हैं...",
-  "Loading...": "लोड हो रहा है...",
+  "Loading channels...": "",
+  "Loading messages...": "",
+  "Loading...": "",
   "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "अधिकतम फ़ाइल आकार अपलोड सीमा पूरी हो गई। कृपया {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} एमबी से नीचे की फ़ाइल अपलोड करें।",
-  "Message Reactions": "संदेश प्रतिक्रियाएँ",
-  "Message deleted": "मैसेज हटा दिया गया",
-  "Message flagged": "संदेश को ध्वजांकित किया गया",
-  "Mute User": "उपयोगकर्ता को म्यूट करें",
-  "Not supported": "समर्थित नहीं",
-  "Nothing yet...": "कोई मैसेज नहीं है...",
-  "Ok": "ठीक",
-  "Only visible to you": "केवल आपको दिखाई दे रहा है",
-  "Open Settings": "सेटिंग्स खोलें",
-  "Photo": "तस्वीर",
-  "Photos and Videos": "तस्वीरें और वीडियों",
-  "Pin to Conversation": "बातचीत में पिन करें",
+  "Message Reactions": "",
+  "Message deleted": "",
+  "Message flagged": "",
+  "Mute User": "",
+  "Not supported": "",
+  "Nothing yet...": "",
+  "Ok": "",
+  "Only visible to you": "",
+  "Open Settings": "",
+  "Photo": "",
+  "Photos and Videos": "",
+  "Pin to Conversation": "",
   "Pinned by": "द्वारा पिन किया गया",
-  "Please enable access to your photos and videos so you can share them.": "कृपया अपनी फ़ोटो और वीडियो तक पहुंच सक्षम करें ताकि आप उन्हें साझा कर सकें।",
+  "Please enable access to your photos and videos so you can share them.": "",
   "Please select a channel first": "कृपया पहले एक चैनल चुनें",
-  "Reconnecting...": "पुनः कनेक्ट हो...",
-  "Reply": "मैसेज को रिप्लाई करे",
-  "Reply to Message": "संदेश का जवाब दें",
-  "Resend": "पुन: भेजें",
-  "Search GIFs": "GIF खोजें",
-  "Select More Photos": "अधिक फ़ोटो चुनें",
-  "Send a message": "एक संदेश भेजें",
+  "Reconnecting...": "",
+  "Reply": "",
+  "Reply to Message": "",
+  "Resend": "",
+  "Search GIFs": "",
+  "Select More Photos": "",
+  "Send a message": "",
   "Sending links is not allowed in this conversation": "इस बातचीत में लिंक भेजने की अनुमति नहीं है",
-  "Slow mode ON": "स्लो मोड चालू",
-  "The message has been reported to a moderator.": "संदेश एक मॉडरेटर को सूचित किया गया है।",
-  "Thread Reply": "धागा जवाब",
-  "Unblock User": "उपयोगकर्ता को अनब्लॉक करें",
-  "Unknown User": "अज्ञात उपयोगकर्ता",
-  "Unmute User": "उपयोगकर्ता को अनम्यूट करें",
-  "Unpin from Conversation": "बातचीत से अनपिन करें",
-  "Unread Messages": "अपठित संदेश",
-  "Video": "वीडियो",
-  "You": "आप",
+  "Slow mode ON": "",
+  "The message has been reported to a moderator.": "",
+  "Thread Reply": "",
+  "Unblock User": "",
+  "Unknown User": "",
+  "Unmute User": "",
+  "Unpin from Conversation": "",
+  "Unread Messages": "",
+  "Video": "",
+  "You": "",
   "You can't send messages in this channel": "आप इस चैनल में संदेश नहीं भेज सकते",
-  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} और {{ nonSelfUserLength }} अधिक टाइप कर रहे हैं",
-  "{{ index }} of {{ photoLength }}": "{{ index }} / {{ photoLength }}",
-  "{{ replyCount }} Replies": "{{ replyCount }} रिप्लाई",
+  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "",
+  "{{ index }} of {{ photoLength }}": "",
+  "{{ replyCount }} Replies": "",
   "{{ replyCount }} Thread Replies": "{{ replyCount }}} थ्रेड उत्तर",
-  "{{ user }} is typing": "{{ user }} टाइप कर रहा है",
-  "🏙 Attachment...": "🏙 अटैचमेंट..."
+  "{{ user }} is typing": "",
+  "🏙 Attachment...": ""
 }