feat(ui): sort session history by last activity instead of creation time

Signed-off-by: Raghavendiran-Github <raghavendiran46461@gmail.com>

Author: Raghavendiran-2002

ui/src/components/sidebars/ChatItem.stories.tsx

@@ -62,7 +62,7 @@ export const ShortTitle: Story = {
     agentNamespace: "kagent",
     onDelete: async () => {},
     sessionName: "Quick question",
-    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
   },
 };
 
@@ -73,7 +73,7 @@ export const LongTitle: Story = {
     agentNamespace: "kagent",
     onDelete: async () => {},
     sessionName: "Review https://github.com/Smartest-Fly/app/pull/1234 and provide feedback on the authentication implementation",
-    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
   },
 };
 
@@ -84,7 +84,7 @@ export const LongTitleWithAgentName: Story = {
     agentNamespace: "kagent",
     onDelete: async () => {},
     sessionName: "Review https://github.com/Smartest-Fly/app/pull/1234 and provide feedback on the authentication implementation",
-    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
   },
 };
 
@@ -107,7 +107,7 @@ export const MultipleLongTitles: Story = {
           agentNamespace="kagent"
           onDelete={async () => {}}
           sessionName={title}
-          createdAt={new Date(Date.now() - i * 3600000).toISOString()}
+          updatedAt={new Date(Date.now() - i * 3600000).toISOString()}
 
         />
       ))}

ui/src/components/sidebars/ChatItem.tsx

@@ -22,10 +22,10 @@ interface ChatItemProps {
   agentNamespace?: string;
   sessionName?: string;
   onDownload?: (sessionId: string) => Promise<void>;
-  createdAt?: string;
+  updatedAt?: string;
 }
 
-const ChatItem = ({ sessionId, agentName, agentNamespace, onDelete, sessionName, onDownload, createdAt }: ChatItemProps) => {
+const ChatItem = ({ sessionId, agentName, agentNamespace, onDelete, sessionName, onDownload, updatedAt }: ChatItemProps) => {
   const title = sessionName || "Untitled";
 
   // Format timestamp based on how recent it is
@@ -58,7 +58,7 @@ const ChatItem = ({ sessionId, agentName, agentNamespace, onDelete, sessionName,
                 style={{
                   background: 'linear-gradient(to right, transparent, hsl(var(--sidebar-background)) 30%)',
                 }}
-              >{formatTime(createdAt)}</span>
+              >{formatTime(updatedAt)}</span>
             </Link>
           </SidebarMenuButton>
           <DropdownMenu modal={false}>

ui/src/components/sidebars/GroupedChats.tsx

@@ -35,9 +35,9 @@ export default function GroupedChats({ agentName, agentNamespace, sessions }: Gr
       older: [],
     };
 
-    // Process each session and group by date
+    // Process each session and group by last activity date (updated_at)
     localSessions.forEach(session => {
-      const date = new Date(session.created_at);
+      const date = new Date(session.updated_at || session.created_at);
       if (isToday(date)) {
         groups.today.push(session);
       } else if (isYesterday(date)) {
@@ -50,7 +50,7 @@ export default function GroupedChats({ agentName, agentNamespace, sessions }: Gr
     const sortChats = (sessions: Session[]) =>
       sessions.sort((a, b) => {
         const getLatestTimestamp = (session: Session) => {
-          return new Date(session.created_at).getTime();
+          return new Date(session.updated_at || session.created_at).getTime();
         };
 
         return getLatestTimestamp(b) - getLatestTimestamp(a);

ui/src/components/sidebars/SessionGroup.tsx

@@ -29,7 +29,7 @@ const ChatGroup = ({ title, sessions, onDeleteSession, onDownloadSession, agentN
           <CollapsibleContent>
             <SidebarMenuSub className="mx-0 px-0 ml-2 pl-2">
               {sessions.map((session) => (
-                <ChatItem key={session.id} sessionId={session.id!} agentName={agentName} agentNamespace={agentNamespace} onDelete={onDeleteSession} sessionName={session.name} onDownload={onDownloadSession} createdAt={session.created_at} />
+                <ChatItem key={session.id} sessionId={session.id!} agentName={agentName} agentNamespace={agentNamespace} onDelete={onDeleteSession} sessionName={session.name} onDownload={onDownloadSession} updatedAt={session.updated_at || session.created_at} />
               ))}
             </SidebarMenuSub>
           </CollapsibleContent>