@developer_tribe/react-native-comnyx 0.12.14 → 0.13.1

package/src/components/ChatList.tsx

@@ -11,7 +11,9 @@ import {
   KeyboardAvoidingView,
   Platform,
   Animated,
+  type SectionListData,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getCustomerConversation, sendCustomerMessage } from '../api';
 import type { AppConversationMessage } from '../types/Conversation';
 import { MessageItem } from './MessageItem';
@@ -23,7 +25,7 @@ import { EmptyList } from './EmptyList';
 import CustomPopup from './CustomAlert';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
 import { ScaledSheet } from './ScaledSheet';
-import { formatDate } from '../utils/formatDate';
+import { formatDate, getDateKey } from '../utils/formatDate';
 import { activeOpacity } from '../constants/activeOpacity';
 import { useAppStore } from '../store/store';
 
@@ -108,6 +110,7 @@ export function ChatList({
 }) {
   const themeColors = useThemeColors();
   const { height: windowHeight } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
   const MESSAGE_MIN_HEIGHT = 60;
   const FLATLIST_PADDING = 20;
   const MESSAGES_PER_PAGE = Math.ceil(
@@ -129,15 +132,11 @@ export function ChatList({
   const nextPageStatus = useRef<'fail' | 'loading' | 'empty'>();
   const [nexPageFailed, setNexPageFailed] = useState(false);
   const [initFailed, setInitFailed] = useState(false);
-  const [isScrollingUp, setIsScrollingUp] = useState(false);
+  const [showScrollDownButton, setShowScrollDownButton] = useState(false);
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
   const listChangedRef = useRef(false);
   const [popupVisible, setPopupVisible] = useState(false);
   const [selectedMessage, setSelectedMessage] = useState<string>('');
-  const [currentSection, setCurrentSection] = useState<string>('');
-  const lastSectionChangeTime = useRef<number>(0);
-  const pendingSectionRef = useRef<string | null>(null);
-  const MIN_SECTION_CHANGE_INTERVAL = 150;
 
   const sections = useMemo(() => {
     if (!data || data.length === 0) return [];
@@ -152,54 +151,78 @@ export function ChatList({
       return message;
     });
 
-    const messagesByDate: Record<string, AppConversationMessage[]> = {};
+    type GroupedMessages = {
+      label: string;
+      timestamp: number;
+      messages: AppConversationMessage[];
+    };
+
+    const messagesByDate: Record<string, GroupedMessages> = {};
 
     validData.forEach((message: AppConversationMessage) => {
-      const dateKey = formatDate(language, message.created_at);
+      if (!message.created_at) {
+        return;
+      }
+
+      const createdAt =
+        message.created_at instanceof Date
+          ? message.created_at
+          : new Date(message.created_at);
+
+      const dateKey = getDateKey(createdAt);
+      if (!dateKey) {
+        return;
+      }
+
+      const dayStart = new Date(
+        createdAt.getFullYear(),
+        createdAt.getMonth(),
+        createdAt.getDate()
+      ).getTime();
+
       if (!messagesByDate[dateKey]) {
-        messagesByDate[dateKey] = [];
+        messagesByDate[dateKey] = {
+          label: formatDate(language, createdAt),
+          timestamp: dayStart,
+          messages: [],
+        };
       }
-      // @ts-ignore
-      messagesByDate[dateKey].push(message);
-    });
 
-    // Check if there are any messages before accessing firstKey
-    const dateKeys = Object.keys(messagesByDate);
-    if (dateKeys.length === 0) return [];
+      messagesByDate[dateKey].messages.push(message);
+    });
 
-    return Object.entries(messagesByDate).map(([title, messages]) => ({
-      title,
-      data: messages.sort((a, b) => {
-        try {
-          if (!a.created_at) {
-            return 0;
-          }
-          if (!b.created_at) {
-            return 0;
-          }
+    return Object.values(messagesByDate)
+      .sort((a, b) => b.timestamp - a.timestamp)
+      .map(({ label, messages }) => ({
+        title: label,
+        data: messages.sort((a, b) => {
+          try {
+            if (!a.created_at || !b.created_at) {
+              return 0;
+            }
 
-          const dateA =
-            a.created_at instanceof Date
-              ? a.created_at
-              : new Date(a.created_at);
-          const dateB =
-            b.created_at instanceof Date
-              ? b.created_at
-              : new Date(b.created_at);
+            const dateA =
+              a.created_at instanceof Date
+                ? a.created_at
+                : new Date(a.created_at);
+            const dateB =
+              b.created_at instanceof Date
+                ? b.created_at
+                : new Date(b.created_at);
+
+            if (typeof dateA.getTime !== 'function') {
+              return 0;
+            }
+            if (typeof dateB.getTime !== 'function') {
+              return 0;
+            }
 
-          if (typeof dateA.getTime !== 'function') {
+            return dateB.getTime() - dateA.getTime();
+          } catch (error) {
             return 0;
           }
-          if (typeof dateB.getTime !== 'function') {
-            return 0;
-          }
-
-          return dateB.getTime() - dateA.getTime();
-        } catch (error) {
-          return 0;
-        }
-      }),
-    }));
+        }),
+      }));
   }, [data, language]);
 
   const resendMessage = useCallback(() => {
@@ -371,39 +394,30 @@ export function ChatList({
     []
   );
 
-  const updateSectionSafely = useCallback(
-    (newSection: string) => {
-      const now = Date.now();
-      const timeSinceLastChange = now - lastSectionChangeTime.current;
-
-      // If this is a different section than current and pending
-      if (
-        newSection !== currentSection &&
-        newSection !== pendingSectionRef.current
-      ) {
-        // If we recently changed the section, queue this change
-        if (timeSinceLastChange < MIN_SECTION_CHANGE_INTERVAL) {
-          // Store the pending section
-          pendingSectionRef.current = newSection;
-
-          // Schedule an update after the minimum interval has passed
-          setTimeout(() => {
-            // Only update if pending section hasn't changed again
-            if (pendingSectionRef.current === newSection) {
-              setCurrentSection(newSection);
-              lastSectionChangeTime.current = Date.now();
-              pendingSectionRef.current = null;
-            }
-          }, MIN_SECTION_CHANGE_INTERVAL - timeSinceLastChange);
-        } else {
-          // Enough time has passed, update immediately
-          setCurrentSection(newSection);
-          lastSectionChangeTime.current = now;
-          pendingSectionRef.current = null;
-        }
-      }
+  const renderSectionFooter = useCallback(
+    ({
+      section,
+    }: {
+      section: SectionListData<AppConversationMessage, any>;
+    }) => {
+      const title = (section as any).title;
+      return (
+        <View style={styles.sectionHeaderContainer}>
+          <AppText
+            style={[
+              styles.sectionHeader,
+              {
+                color: themeColors.slate,
+                backgroundColor: themeColors.ghost,
+              },
+            ]}
+          >
+            {title}
+          </AppText>
+        </View>
+      );
     },
-    [currentSection]
+    [themeColors]
   );
 
   const handleScroll = useCallback(
@@ -412,67 +426,14 @@ export function ChatList({
       const contentHeight = event.nativeEvent.contentSize.height;
       const scrollViewHeight = event.nativeEvent.layoutMeasurement.height;
 
-      setIsScrollingUp(currentScrollY > 300);
-
-      // Determine the section at the bottom of the window based on scroll position
-      if (sections && sections.length > 0) {
-        let accumulatedHeight = 0;
-        let lastVisibleSection = null;
-
-        // Check all sections
-        for (let i = 0; i < sections.length; i++) {
-          const section = sections[i];
-          if (!section || !section.data) continue;
-
-          // Calculate section height
-          const sectionHeight = section.data.length * (MESSAGE_MIN_HEIGHT + 10);
-
-          // Section positions
-          const sectionStart = accumulatedHeight;
-          const sectionEnd = sectionStart + sectionHeight;
-
-          // Visible area
-          const visibleTop = currentScrollY;
-          const visibleBottom = visibleTop + scrollViewHeight;
-
-          // Find the section visible at the bottom of the screen
-          const isSectionVisibleAtBottom =
-            (visibleBottom >= sectionStart && visibleBottom <= sectionEnd) ||
-            (sectionStart <= visibleTop && sectionEnd >= visibleBottom);
-
-          if (isSectionVisibleAtBottom) {
-            lastVisibleSection = section;
-          }
-
-          accumulatedHeight += sectionHeight;
-        }
-
-        // Display the found section using our safe updater
-        if (
-          lastVisibleSection?.title &&
-          lastVisibleSection.title !== currentSection
-        ) {
-          updateSectionSafely(lastVisibleSection.title);
-        } else if (
-          !lastVisibleSection &&
-          currentScrollY <= 10 &&
-          sections[0]?.title
-        ) {
-          updateSectionSafely(sections[0].title);
-        }
-      }
+      const shouldShowScrollButton = currentScrollY > 300;
+      setShowScrollDownButton(shouldShowScrollButton);
 
       if (currentScrollY >= contentHeight - scrollViewHeight - 200) {
         nextPage();
       }
     },
-    [
-      nextPage,
-      sections,
-      currentSection,
-      MESSAGE_MIN_HEIGHT,
-      updateSectionSafely,
-    ]
+    [nextPage]
   );
 
   const scrollToBottom = useCallback(
@@ -542,13 +503,6 @@ export function ChatList({
     }
   }, [MESSAGES_PER_PAGE, customer?.external_id, initFailed, setData]);
 
-  // Initialize the current section when sections are loaded
-  useEffect(() => {
-    if (sections.length > 0 && sections[0]?.title) {
-      setCurrentSection(sections[0].title);
-    }
-  }, [sections]);
-
   // Add keyboard listeners
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(
@@ -571,13 +525,6 @@ export function ChatList({
     };
   }, []);
 
-  // Clear pending updates on unmount
-  useEffect(() => {
-    return () => {
-      pendingSectionRef.current = null;
-    };
-  }, []);
-
   if (nexPageFailed) {
     return (
       <View
@@ -623,11 +570,14 @@ export function ChatList({
         <View
           style={[
             styles.container,
-            { backgroundColor: themeColors.background },
+            {
+              backgroundColor: themeColors.background,
+              paddingTop: insets.top || 40,
+            },
           ]}
         >
           <TouchableOpacity
-            style={[styles.iconContainer]}
+            style={[styles.iconContainer, { top: insets.top || 40 }]}
             onPress={onBack}
             activeOpacity={activeOpacity}
           >
@@ -671,23 +621,12 @@ export function ChatList({
           </View>
 
           <View style={styles.listContainer}>
-            <AppText
-              style={[
-                styles.dateText,
-                {
-                  color: themeColors.slate,
-                  backgroundColor: themeColors.ghost,
-                },
-              ]}
-            >
-              {currentSection}
-            </AppText>
-
             <SectionList
               ref={ref}
               sections={sections}
               inverted
               renderItem={renderItem}
+              renderSectionFooter={renderSectionFooter}
               contentContainerStyle={[
                 styles.contentContainer,
                 { backgroundColor: themeColors.background },
@@ -717,7 +656,7 @@ export function ChatList({
               showsVerticalScrollIndicator={false}
             />
           </View>
-          {isScrollingUp && (
+          {showScrollDownButton && (
             <TouchableOpacity
               activeOpacity={activeOpacity}
               style={[
@@ -762,7 +701,6 @@ const styles = ScaledSheet.create({
   container: {
     flex: 1,
     paddingBottom: '20@vs',
-    paddingTop: '40@vs',
     position: 'relative',
   },
   list: {
@@ -841,7 +779,7 @@ const styles = ScaledSheet.create({
   },
   iconContainer: {
     paddingHorizontal: '20@s',
-    paddingVertical: '40@vs',
+    paddingVertical: '10@vs',
     position: 'absolute',
     zIndex: 9999,
   },
@@ -868,17 +806,6 @@ const styles = ScaledSheet.create({
     alignSelf: 'center',
     marginVertical: '8@vs',
   },
-  dateText: {
-    fontSize: '14@vs',
-    fontWeight: '500',
-    borderRadius: '12@s',
-    paddingHorizontal: '8@s',
-    paddingVertical: '2@s',
-    position: 'absolute',
-    top: '10@vs',
-    zIndex: 10,
-    alignSelf: 'center',
-  },
   listContainer: {
     flex: 1,
     position: 'relative',

package/src/constants/translations.ts

@@ -36,6 +36,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': "The team's message will be displayed here.",
     'chat.live': 'Live Chat',
     'chat.support-team': 'Support Team',
+    'chat.date.today': 'Today',
+    'chat.date.yesterday': 'Yesterday',
     'customer.form.resend': 'Resend',
     'chat.list-failed-message.title': 'Failed to send',
     'chat.list-failed-message.description':
@@ -89,6 +91,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Ekibin mesajları burada görüntülenecek.',
     'chat.live': 'Canlı Sohbet',
     'chat.support-team': 'Destek Ekibi',
+    'chat.date.today': 'Bugün',
+    'chat.date.yesterday': 'Dün',
     'customer.form.resend': 'Yeniden Gönder',
     'chat.list-failed-message.title': 'Gönderilemedi',
     'chat.list-failed-message.description':
@@ -142,6 +146,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Los mensajes del equipo se mostrarán aquí.',
     'chat.live': 'Chat en Vivo',
     'chat.support-team': 'Equipo de Soporte',
+    'chat.date.today': 'Hoy',
+    'chat.date.yesterday': 'Ayer',
     'customer.form.resend': 'Reenviar',
     'chat.list-failed-message.title': 'Error al enviar',
     'chat.list-failed-message.description':
@@ -199,6 +205,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': "Les messages de l'équipe seront affichés ici.",
     'chat.live': 'Chat en Direct',
     'chat.support-team': 'Équipe de Support',
+    'chat.date.today': "Aujourd'hui",
+    'chat.date.yesterday': 'Hier',
     'customer.form.resend': 'Renvoyer',
     'chat.list-failed-message.title': "Échec de l'envoi",
     'chat.list-failed-message.description':
@@ -256,6 +264,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
       'Die Nachrichten des Teams werden hier angezeigt.',
     'chat.live': 'Live-Chat',
     'chat.support-team': 'Support-Team',
+    'chat.date.today': 'Heute',
+    'chat.date.yesterday': 'Gestern',
     'customer.form.resend': 'Erneut senden',
     'chat.list-failed-message.title': 'Senden fehlgeschlagen',
     'chat.list-failed-message.description':
@@ -310,6 +320,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'I messaggi del team saranno visualizzati qui.',
     'chat.live': 'Chat dal Vivo',
     'chat.support-team': 'Team di Supporto',
+    'chat.date.today': 'Oggi',
+    'chat.date.yesterday': 'Ieri',
     'customer.form.resend': 'Rinvia',
     'chat.list-failed-message.title': 'Invio fallito',
     'chat.list-failed-message.description':
@@ -366,6 +378,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'As mensaggi da equipe serão exibidas aqui.',
     'chat.live': 'Chat ao Vivo',
     'chat.support-team': 'Equipe de Suporte',
+    'chat.date.today': 'Hoje',
+    'chat.date.yesterday': 'Ontem',
     'customer.form.resend': 'Reenviar',
     'chat.list-failed-message.title': 'Falha ao enviar',
     'chat.list-failed-message.description':
@@ -423,6 +437,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Сообщения команды будут отображаться здесь.',
     'chat.live': 'Живой Чат',
     'chat.support-team': 'Служба Поддержки',
+    'chat.date.today': 'Сегодня',
+    'chat.date.yesterday': 'Вчера',
     'customer.form.resend': 'Отправить повторно',
     'chat.list-failed-message.title': 'Не удалось отправить',
     'chat.list-failed-message.description':
@@ -477,6 +493,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'チームからのメッセージがここに表示されます。',
     'chat.live': 'ライブチャット',
     'chat.support-team': 'サポートチーム',
+    'chat.date.today': '今日',
+    'chat.date.yesterday': '昨日',
     'customer.form.resend': '再送信',
     'chat.list-failed-message.title': '送信に失敗しました',
     'chat.list-failed-message.description':
@@ -526,6 +544,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': '团队的消息将显示在这里。',
     'chat.live': '在线聊天',
     'chat.support-team': '支持团队',
+    'chat.date.today': '今天',
+    'chat.date.yesterday': '昨天',
     'customer.form.resend': '重新发送',
     'chat.list-failed-message.title': '发送失败',
     'chat.list-failed-message.description': '消息无法发送。请重试。',
@@ -576,6 +596,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'ستظهر رسائل الفريق هنا.',
     'chat.live': 'دردشة مباشرة',
     'chat.support-team': 'فريق الدعم',
+    'chat.date.today': 'اليوم',
+    'chat.date.yesterday': 'أمس',
     'customer.form.resend': 'إعادة الإرسال',
     'chat.list-failed-message.title': 'فشل الإرسال',
     'chat.list-failed-message.description':
@@ -628,6 +650,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Mesej pasukan akan dipaparkan di sini.',
     'chat.live': 'Sembang Langsung',
     'chat.support-team': 'Pasukan Sokongan',
+    'chat.date.today': 'Hari ini',
+    'chat.date.yesterday': 'Kemarin',
     'customer.form.resend': 'Hantar Semula',
     'chat.list-failed-message.title': 'Gagal menghantar',
     'chat.list-failed-message.description':
@@ -679,6 +703,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Tin nhắn của nhóm sẽ hiển thị ở đây.',
     'chat.live': 'Trò chuyện trực tiếp',
     'chat.support-team': 'Đội hỗ trợ',
+    'chat.date.today': 'Hôm nay',
+    'chat.date.yesterday': 'Hôm qua',
     'customer.form.resend': 'Gửi lại',
     'chat.list-failed-message.title': 'Gửi thất bại',
     'chat.list-failed-message.description':
@@ -732,6 +758,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Teamets meddelanden visas här.',
     'chat.live': 'Direktchatt',
     'chat.support-team': 'Supportteam',
+    'chat.date.today': 'Idag',
+    'chat.date.yesterday': 'Igår',
     'customer.form.resend': 'Skicka igen',
     'chat.list-failed-message.title': 'Misslyckades att skicka',
     'chat.list-failed-message.description':
@@ -781,6 +809,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': '팀의 메시지가 여기에 표시됩니다.',
     'chat.live': '라이브 채팅',
     'chat.support-team': '지원 팀',
+    'chat.date.today': '오늘',
+    'chat.date.yesterday': '어제',
     'customer.form.resend': '다시 보내기',
     'chat.list-failed-message.title': '전송 실패',
     'chat.list-failed-message.description':
@@ -835,6 +865,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'टीम के संदेश यहाँ दिखाए जाएंगे।',
     'chat.live': 'जिव चैट',
     'chat.support-team': 'सपोर्ट टीम',
+    'chat.date.today': 'आज',
+    'chat.date.yesterday': 'कल',
     'customer.form.resend': 'पुनः भेजें',
     'chat.list-failed-message.title': 'भेजने में विफल',
     'chat.list-failed-message.description':
@@ -888,6 +920,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Berichten van het team worden hier weergegeven.',
     'chat.live': 'Live Chat',
     'chat.support-team': 'Supportteam',
+    'chat.date.today': 'Vandaag',
+    'chat.date.yesterday': 'Gisteren',
     'customer.form.resend': 'Opnieuw verzenden',
     'chat.list-failed-message.title': 'Verzenden mislukt',
     'chat.list-failed-message.description':
@@ -938,6 +972,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'הודעות הצוות יופיעו כאן.',
     'chat.live': 'צ׳אט חי',
     'chat.support-team': 'צוות תמיכה',
+    'chat.date.today': 'היום',
+    'chat.date.yesterday': 'אתמול',
     'customer.form.resend': 'שלח שוב',
     'chat.list-failed-message.title': 'שליחה נכשלה',
     'chat.list-failed-message.description': 'הודעה לא נשלחה. אנא נסה שוב.',
@@ -991,6 +1027,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Команда повідомлень зʼявиться тут.',
     'chat.live': 'Онлайн чат',
     'chat.support-team': 'Команда підтримки',
+    'chat.date.today': 'Сьогодні',
+    'chat.date.yesterday': 'Вчора',
     'customer.form.resend': 'Надіслати знову',
     'chat.list-failed-message.title': 'Не вдалося надіслати',
     'chat.list-failed-message.description':
@@ -1046,6 +1084,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Együttes üzenetei itt láthatók.',
     'chat.live': 'Élő csevegés',
     'chat.support-team': 'Támogató csapat',
+    'chat.date.today': 'Ma',
+    'chat.date.yesterday': 'Tegnap',
     'customer.form.resend': 'Újraküldés',
     'chat.list-failed-message.title': 'Küldés sikertelen',
     'chat.list-failed-message.description':
@@ -1101,6 +1141,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Mesajele echipei vor fi afișate aici.',
     'chat.live': 'Chat live',
     'chat.support-team': 'Echipa de suport',
+    'chat.date.today': 'Astăzi',
+    'chat.date.yesterday': 'Ieri',
     'customer.form.resend': 'Trimite din nou',
     'chat.list-failed-message.title': 'Trimitere eșuată',
     'chat.list-failed-message.description':
@@ -1154,6 +1196,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Mesej pasukan akan dipaparkan di sini.',
     'chat.live': 'Sembang Langsung',
     'chat.support-team': 'Pasukan Sokongan',
+    'chat.date.today': 'Hari ini',
+    'chat.date.yesterday': 'Semalam',
     'customer.form.resend': 'Hantar Semula',
     'chat.list-failed-message.title': 'Gagal menghantar',
     'chat.list-failed-message.description':
@@ -1206,6 +1250,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Komanda mesajları burada görünəcək.',
     'chat.live': 'Canlı Çat',
     'chat.support-team': 'Dəstək Komandası',
+    'chat.date.today': 'Bu gün',
+    'chat.date.yesterday': 'Dünən',
     'customer.form.resend': 'Təkrar Göndər',
     'chat.list-failed-message.title': 'Göndərmə uğursuz oldu',
     'chat.list-failed-message.description':
@@ -1258,6 +1304,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Poruke tima će se pojaviti ovdje.',
     'chat.live': 'Live Chat',
     'chat.support-team': 'Tim za podršku',
+    'chat.date.today': 'Danas',
+    'chat.date.yesterday': 'Jučer',
     'customer.form.resend': 'Pošalji ponovo',
     'chat.list-failed-message.title': 'Slanje nije uspjelo',
     'chat.list-failed-message.description':
@@ -1311,6 +1359,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Команданың хабарламалары осында көрсетіледі.',
     'chat.live': 'Тікелей чат',
     'chat.support-team': 'Қолдау тобы',
+    'chat.date.today': 'Бүгін',
+    'chat.date.yesterday': 'Кеше',
     'customer.form.resend': 'Қайта жіберу',
     'chat.list-failed-message.title': 'Жіберілмеді',
     'chat.list-failed-message.description':
@@ -1364,6 +1414,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Spanboodskappe sal hier verskyn.',
     'chat.live': 'Regstreekse Klets',
     'chat.support-team': 'Ondersteuningspan',
+    'chat.date.today': 'Vandag',
+    'chat.date.yesterday': 'Gister',
     'customer.form.resend': 'Stuur Oor',
     'chat.list-failed-message.title': 'Stuur het misluk',
     'chat.list-failed-message.description':
@@ -1416,6 +1468,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Ìrántí ẹgbẹ́ yóò hàn níbí.',
     'chat.live': 'Jíròrò Láìpẹ́',
     'chat.support-team': 'Ẹgbẹ́ Atilẹ́yin',
+    'chat.date.today': 'Lónìí',
+    'chat.date.yesterday': 'Àná',
     'customer.form.resend': 'Ránṣé̀ Padà',
     'chat.list-failed-message.title': 'Ránṣé̀ kò rọrùn',
     'chat.list-failed-message.description': 'A kòlẹ̀ ránṣé̀. Jọ̀wọ́, tún gbìyànjú.',
@@ -1467,6 +1521,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Holdets beskeder vises her.',
     'chat.live': 'Live Chat',
     'chat.support-team': 'Supportteam',
+    'chat.date.today': 'I dag',
+    'chat.date.yesterday': 'I går',
     'customer.form.resend': 'Send igen',
     'chat.list-failed-message.title': 'Afsendelse mislykkedes',
     'chat.list-failed-message.description':
@@ -1519,6 +1575,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'chat.empty.description': 'Wiadomości zespołu pojawią się tutaj.',
     'chat.live': 'Czat na żywo',
     'chat.support-team': 'Zespół wsparcia',
+    'chat.date.today': 'Dziś',
+    'chat.date.yesterday': 'Wczoraj',
     'customer.form.resend': 'Wyślij ponownie',
     'chat.list-failed-message.title': 'Nie udało się wysłać',
     'chat.list-failed-message.description':

package/src/hooks/usePolling.ts

@@ -13,7 +13,7 @@ export function usePolling() {
   const lastMessage = data ? data[data.length - 1] : null;
   useEffect(() => {
     const created_at = lastMessage?.created_at;
-    let interval: NodeJS.Timeout | null = null;
+    let interval: ReturnType<typeof setInterval> | null = null;
     if (customer && created_at) {
       interval = setInterval(() => {
         getNewCustomerConversation(customer?.external_id, created_at, {

package/src/register/Accumulator.ts

@@ -4,7 +4,7 @@ const ACCUMULATOR_DEBOUNCE_TIME_IN_MS = 3000;
 
 export class Accumulator {
   private registerData: CreateCustomerRequest | null = null;
-  private __select_time: NodeJS.Timeout | undefined = undefined;
+  private __select_time: ReturnType<typeof setTimeout> | undefined = undefined;
   private listener: ((data: CreateCustomerRequest) => Promise<void>) | null =
     null;
   private _isListenerCalledOnce: boolean = false;