Add feature to show timestamp of memories in DSNViewer

autonomys · Jan 15, 2025 · 3888d7e · 3888d7e
1 parent b39ef08
commit 3888d7e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 3 deletions.
diff --git a/agent-memory-viewer/backend/src/db/index.ts b/agent-memory-viewer/backend/src/db/index.ts
@@ -150,6 +150,7 @@ export async function getAllDsn(
                     tweet_id: content.tweet?.id || null,
                     cid: record.cid,
                     created_at: record.created_at,
+                    timestamp: content.timestamp || null,
                     author_username: content.tweet?.username || content.tweet?.author_username || 
                         (content.type === 'posted' ? config.AGENT_USERNAME : null), 
                     tweet_content: content.tweet?.text || null,

diff --git a/agent-memory-viewer/frontend/src/components/DSNViewer.tsx b/agent-memory-viewer/frontend/src/components/DSNViewer.tsx
@@ -28,6 +28,7 @@ import { colors } from '../styles/theme/colors';
 import { useSearchParams } from 'react-router-dom';
 import SearchBar from './SearchBar';
 import StatusFilter from './StatusFilter';
+import { getRelativeTime } from '../utils/timeUtils';
 
 function DSNViewer() {
     const [searchParams, setSearchParams] = useSearchParams();
@@ -95,9 +96,14 @@ function DSNViewer() {
                         >
                             <Card {...cardStyles.baseStyle}>
                                 <CardBody {...cardStyles.bodyStyle}>
-                                    <Text {...textStyles.heading}>
-                                        Tweet by @{item.author_username}
-                                    </Text>
+                                    <HStack justify="space-between" mb={2}>
+                                        <Text {...textStyles.heading}>
+                                            Tweet by @{item.author_username}
+                                        </Text>
+                                        <Text color="gray.400" fontSize="sm">
+                                            {getRelativeTime(item.timestamp)}
+                                        </Text>
+                                    </HStack>
                                     <Text {...textStyles.value} whiteSpace="pre-wrap" mb={4}>
                                         {item.tweet_content}
                                     </Text>

diff --git a/agent-memory-viewer/frontend/src/types/index.ts b/agent-memory-viewer/frontend/src/types/index.ts
@@ -133,6 +133,7 @@ export interface DSNData {
     tweet_id: string
     cid: string
     created_at: string
+    timestamp: string
     author_username: string
     tweet_content: string
     response_content: string

diff --git a/agent-memory-viewer/frontend/src/utils/timeUtils.ts b/agent-memory-viewer/frontend/src/utils/timeUtils.ts
@@ -0,0 +1,32 @@
+export function getRelativeTime(timestamp: string): string {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+    if (diffInSeconds < 60) {
+        return `${diffInSeconds}s ago`;
+    }
+
+    const diffInMinutes = Math.floor(diffInSeconds / 60);
+    if (diffInMinutes < 60) {
+        return `${diffInMinutes}m ago`;
+    }
+
+    const diffInHours = Math.floor(diffInMinutes / 60);
+    if (diffInHours < 24) {
+        return `${diffInHours}h ago`;
+    }
+
+    const diffInDays = Math.floor(diffInHours / 24);
+    if (diffInDays < 30) {
+        return `${diffInDays}d ago`;
+    }
+
+    const diffInMonths = Math.floor(diffInDays / 30);
+    if (diffInMonths < 12) {
+        return `${diffInMonths}mo ago`;
+    }
+
+    const diffInYears = Math.floor(diffInDays / 365);
+    return `${diffInYears}y ago`;
+}