Merge pull request #145 from autonomys/feat/memory-viewer-timeline

Feat/memory viewer timeline
autonomys · Jan 16, 2025 · 6efaaf8 · 6efaaf8
2 parents b39ef08 + eb4d1a4
commit 6efaaf8
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 4 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/package.json b/agent-memory-viewer/frontend/package.json
@@ -17,6 +17,7 @@
         "@emotion/styled": "^11.11.0",
         "@types/cors": "^2.8.17",
         "axios": "^1.6.7",
+        "dayjs": "^1.11.13",
         "framer-motion": "^11.14.4",
         "lodash": "^4.17.21",
         "react": "19.0.0",

diff --git a/agent-memory-viewer/frontend/src/components/DSNViewer.tsx b/agent-memory-viewer/frontend/src/components/DSNViewer.tsx
@@ -7,7 +7,8 @@ import {
     Link, 
     Button, 
     HStack, 
-    Select
+    Select,
+    Tooltip,
 } from '@chakra-ui/react';
 import { useState, useEffect } from 'react';
 import { useDSNData } from '../api/client';
@@ -28,6 +29,7 @@ import { colors } from '../styles/theme/colors';
 import { useSearchParams } from 'react-router-dom';
 import SearchBar from './SearchBar';
 import StatusFilter from './StatusFilter';
+import { utcToLocalRelativeTime } from '../utils/timeUtils';
 
 function DSNViewer() {
     const [searchParams, setSearchParams] = useSearchParams();
@@ -95,9 +97,25 @@ 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>
+                                        <Tooltip 
+                                            label={new Date(item.timestamp).toLocaleString()} 
+                                            placement="top"
+                                        >
+                                            <Text 
+                                                color="gray.500" 
+                                                fontSize="s" 
+                                                fontStyle="italic"
+                                                _hover={{ color: 'gray.600' }}
+                                                cursor="help"
+                                            >
+                                                {utcToLocalRelativeTime(item.timestamp)}
+                                            </Text>
+                                        </Tooltip>
+                                    </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,50 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import utc from 'dayjs/plugin/utc'
+
+dayjs.extend(relativeTime)
+dayjs.extend(utc)
+
+export const formatSeconds = (seconds: number | bigint): string => {
+  if (typeof seconds === 'number' && seconds < 0) {
+    throw new Error('Seconds cannot be negative')
+  } else if (typeof seconds === 'bigint' && seconds < 0n) {
+    throw new Error('Seconds cannot be negative')
+  }
+
+  const timeUnits = [
+    { unit: 'd', value: 86400n },
+    { unit: 'h', value: 3600n },
+    { unit: 'm', value: 60n },
+    { unit: 's', value: 1n },
+  ]
+
+  let secondsBigInt = BigInt(seconds)
+
+  return (
+    timeUnits
+      .reduce((result, { unit, value }) => {
+        if (secondsBigInt >= value) {
+          const time = secondsBigInt / value
+          secondsBigInt %= value
+          result += `${time}${unit} `
+        }
+        return result
+      }, '')
+      .trim() || '0s'
+  )
+}
+
+export const utcToLocalRelativeTime = (timestamp: string): string => {
+  const now = dayjs()
+  const time = dayjs.utc(timestamp).local()
+  const diffInSeconds = now.diff(time, 'second')
+
+  if (diffInSeconds < 60) return `${diffInSeconds} seconds ago`
+  return time.fromNow(true) + ' ago'
+}
+
+export const utcToLocalTime = (timestamp: string): string =>
+  dayjs.utc(timestamp).local().format('DD MMM YYYY | HH:mm:ss(Z)')
+
+export const currentYear = (): number => dayjs().year() 
diff --git a/agent-memory-viewer/frontend/yarn.lock b/agent-memory-viewer/frontend/yarn.lock
@@ -1158,6 +1158,11 @@ csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+dayjs@^1.11.13:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
 debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"