From d356f2d87008e5e6715dba6ff89a30d047fd318b Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 9 Feb 2025 14:58:08 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20refactor:=20include=20createdAt?=
 =?UTF-8?q?=20in=20conversation=20selection=20and=20update=20related=20typ?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/models/Conversation.js                    |  2 +-
 .../Conversations/Conversations.tsx           | 68 ++++++++++++-------
 client/src/components/Nav/Nav.tsx             |  2 +-
 packages/data-provider/src/types/queries.ts   |  2 +-
 4 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index 0219efec5a3..ea7315fa285 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -165,7 +165,7 @@ module.exports = {
 
     try {
       const convos = await Conversation.find(query)
-        .select('conversationId endpoint title updatedAt user')
+        .select('conversationId endpoint title createdAt updatedAt user')
         .sort({ updatedAt: order === 'asc' ? 1 : -1 })
         .limit(limit + 1)
         .lean();
diff --git a/client/src/components/Conversations/Conversations.tsx b/client/src/components/Conversations/Conversations.tsx
index 149dac4f47c..c9e82181de9 100644
--- a/client/src/components/Conversations/Conversations.tsx
+++ b/client/src/components/Conversations/Conversations.tsx
@@ -12,14 +12,17 @@ interface ConversationsProps {
   conversations: Array<TConversation | null>;
   moveToTop: () => void;
   toggleNav: () => void;
-  containerRef: React.RefObject<HTMLDivElement | List>;
+  containerRef: React.RefObject<HTMLDivElement>;
   loadMoreConversations: () => void;
   isFetchingNextPage: boolean;
 }
 
 const LoadingSpinner = memo(() => (
-  <Spinner className="m-1 mx-auto mb-4 h-4 w-4 text-text-primary" />
+  <div className="flex justify-center py-2">
+    <Spinner className="m-1 h-4 w-4 text-text-primary" />
+  </div>
 ));
+LoadingSpinner.displayName = 'LoadingSpinner';
 
 const DateLabel: FC<{ groupName: string }> = memo(({ groupName }) => {
   const localize = useLocalize();
@@ -33,7 +36,8 @@ DateLabel.displayName = 'DateLabel';
 
 type FlattenedItem =
   | { type: 'header'; groupName: string }
-  | { type: 'convo'; convo: TConversation };
+  | { type: 'convo'; convo: TConversation }
+  | { type: 'spinner' };
 
 const Conversations: FC<ConversationsProps> = ({
   conversations: rawConversations,
@@ -66,8 +70,11 @@ const Conversations: FC<ConversationsProps> = ({
       items.push({ type: 'header', groupName });
       items.push(...convos.map((convo) => ({ type: 'convo' as const, convo })));
     });
+    if (isFetchingNextPage) {
+      items.push({ type: 'spinner' });
+    }
     return items;
-  }, [groupedConversations]);
+  }, [groupedConversations, isFetchingNextPage]);
 
   const cache = useMemo(
     () =>
@@ -76,7 +83,13 @@ const Conversations: FC<ConversationsProps> = ({
         defaultHeight: 34,
         keyMapper: (index) => {
           const item = flattenedItems[index];
-          return item.type === 'header' ? `header-${index}` : `convo-${item.convo.conversationId}`;
+          if (item.type === 'header') {
+            return `header-${index}`;
+          }
+          if (item.type === 'spinner') {
+            return 'spinner';
+          }
+          return `convo-${item.convo.conversationId}`;
         },
       }),
     [flattenedItems],
@@ -85,20 +98,32 @@ const Conversations: FC<ConversationsProps> = ({
   const rowRenderer = useCallback(
     ({ index, key, parent, style }) => {
       const item = flattenedItems[index];
+
+      const renderContent = () => {
+        switch (item.type) {
+          case 'header':
+            return <DateLabel groupName={item.groupName} />;
+          case 'spinner':
+            return <LoadingSpinner />;
+          case 'convo':
+            return (
+              <Convo
+                conversation={item.convo}
+                retainView={moveToTop}
+                toggleNav={toggleNav}
+                isLatestConvo={item.convo.conversationId === firstTodayConvoId}
+              />
+            );
+          default:
+            return null;
+        }
+      };
+
       return (
         <CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
           {({ registerChild }) => (
             <div ref={registerChild} style={style}>
-              {item.type === 'header' ? (
-                <DateLabel groupName={item.groupName} />
-              ) : (
-                <Convo
-                  conversation={item.convo}
-                  retainView={moveToTop}
-                  toggleNav={toggleNav}
-                  isLatestConvo={item.convo.conversationId === firstTodayConvoId}
-                />
-              )}
+              {renderContent()}
             </div>
           )}
         </CellMeasurer>
@@ -112,7 +137,6 @@ const Conversations: FC<ConversationsProps> = ({
     [cache],
   );
 
-  // Throttle the loadMoreConversations call so it's not triggered too frequently.
   const throttledLoadMore = useMemo(
     () => throttle(loadMoreConversations, 300),
     [loadMoreConversations],
@@ -120,7 +144,6 @@ const Conversations: FC<ConversationsProps> = ({
 
   const handleRowsRendered = useCallback(
     ({ stopIndex }: { stopIndex: number }) => {
-      // Trigger early when user scrolls within 2 items of the end.
       if (stopIndex >= flattenedItems.length - 2) {
         throttledLoadMore();
       }
@@ -129,12 +152,14 @@ const Conversations: FC<ConversationsProps> = ({
   );
 
   return (
-    <div className="relative flex h-full flex-col pb-2 text-sm text-text-primary">
+    <div
+      ref={containerRef}
+      className="relative flex h-full flex-col pb-2 text-sm text-text-primary"
+    >
       <div className="flex-1">
         <AutoSizer>
           {({ width, height }) => (
             <List
-              ref={containerRef as React.RefObject<List>}
               width={width}
               height={height}
               deferredMeasurementCache={cache}
@@ -151,11 +176,6 @@ const Conversations: FC<ConversationsProps> = ({
           )}
         </AutoSizer>
       </div>
-      {isFetchingNextPage && (
-        <div className="mt-2">
-          <LoadingSpinner />
-        </div>
-      )}
     </div>
   );
 };
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index 7976538733d..a25e2d2fc43 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/client/src/components/Nav/Nav.tsx
@@ -205,7 +205,7 @@ const Nav = memo(
                           toggleNav={itemToggleNav}
                           containerRef={containerRef}
                           loadMoreConversations={loadMoreConversations}
-                          isFetchingNextPage={isFetchingNextPage}
+                          isFetchingNextPage={isFetchingNextPage || showLoading}
                         />
                       </div>
                     </div>
diff --git a/packages/data-provider/src/types/queries.ts b/packages/data-provider/src/types/queries.ts
index 3cdb541aa14..22847ddeed2 100644
--- a/packages/data-provider/src/types/queries.ts
+++ b/packages/data-provider/src/types/queries.ts
@@ -20,7 +20,7 @@ export type ConversationListParams = {
 
 export type MinimalConversation = Pick<
   s.TConversation,
-  'conversationId' | 'endpoint' | 'title' | 'updatedAt' | 'user'
+  'conversationId' | 'endpoint' | 'title' | 'createdAt' | 'updatedAt' | 'user'
 >;
 
 export type ConversationListResponse = {