Feat/cp 10663/timeago

package.json

@@ -119,6 +119,7 @@
     "react-masonry-css": "1.0.16",
     "react-modal": "3.14.4",
     "react-router-dom": "5.3.0",
+    "react-timeago": "^8.2.0",
     "react-timer-hook": "3.0.5",
     "react-transition-group": "4.4.2",
     "react-virtualized": "9.22.3",

src/background/services/firebase/models.ts

@@ -21,4 +21,5 @@ export interface ChatConfig extends ConfigParams {
 export interface ChatDialogHistory {
   role: 'model' | 'user';
   content: string;
+  timestamp: number;
 }

src/contexts/FirebaseProvider.tsx

@@ -19,6 +19,7 @@ import {
 export interface PromptItem {
   role: 'model' | 'user';
   content: string;
+  timestamp: number;
 }
 
 const FirebaseContext = createContext<{
@@ -40,6 +41,7 @@ const FirebaseContext = createContext<{
       {
         role: 'model' | 'user';
         content: string;
+        timestamp: number;
       }[]
     >
   >;
@@ -53,6 +55,7 @@ export function FirebaseContextProvider({ children }: { children: any }) {
     {
       role: 'model',
       content: `Hey there! I'm Core AI, here to help you manage your assets safely and smoothly. What can I do for you today?`,
+      timestamp: Date.now(),
     },
   ]);
 

src/pages/Home/components/Portfolio/Prompt/Prompt.tsx

@@ -437,7 +437,10 @@ export function Prompt() {
     async (message: string) => {
       setIsTyping(true);
       setPrompts((prev) => {
-        return [...prev, { role: 'user', content: message }];
+        return [
+          ...prev,
+          { role: 'user', content: message, timestamp: Date.now() },
+        ];
       });
       setInput('');
 
@@ -510,7 +513,14 @@ export function Prompt() {
             });
             // Log the text response.
             setPrompts((prev) => {
-              return [...prev, { role: 'model', content: functionResult.text }];
+              return [
+                ...prev,
+                {
+                  role: 'model',
+                  content: functionResult.text,
+                  timestamp: Date.now(),
+                },
+              ];
             });
           } catch (e: any) {
             const errorMessage =
@@ -542,15 +552,25 @@ export function Prompt() {
 
             // Log the text response.
             setPrompts((prev) => {
-              return [...prev, { role: 'model', content: errorResult.text }];
+              return [
+                ...prev,
+                {
+                  role: 'model',
+                  content: errorResult.text,
+                  timestamp: Date.now(),
+                },
+              ];
             });
           }
         } else {
           if (!response.text) {
             throw new Error('EMPTY_RESPONSE');
           }
           setPrompts((prev) => {
-            return [...prev, { role: 'model', content: response.text }];
+            return [
+              ...prev,
+              { role: 'model', content: response.text, timestamp: Date.now() },
+            ];
           });
         }
       } catch (e: any) {
@@ -568,6 +588,7 @@ export function Prompt() {
                 role: 'model',
                 content:
                   'Whooops... There is something wrong with the service please try again later!',
+                timestamp: Date.now(),
               },
             ];
           });
@@ -579,6 +600,7 @@ export function Prompt() {
                 role: 'model',
                 content:
                   "I'm sorry but I cannot fullfil your request at the moment. You can try again later!",
+                timestamp: Date.now(),
               },
             ];
           });
@@ -590,6 +612,7 @@ export function Prompt() {
                 role: 'model',
                 content:
                   "Whooopsie... We've encountered some issues please try again later!",
+                timestamp: Date.now(),
               },
             ];
           });

src/pages/Home/components/Portfolio/Prompt/PromptElements.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { PromptItem } from '@src/contexts/FirebaseProvider';
 import { Typewriter } from './Typewriter';
 import ReactMarkdown from 'react-markdown';
+import TimeAgo from 'react-timeago';
 
 const Avatar = styled(Stack)(() => ({
   position: 'relative',
@@ -62,76 +63,90 @@ export const AIDialog = ({
   }, [isTextTyped, isDialogOpen]);
 
   return (
-    <Stack
-      sx={{
-        flexDirection: 'row',
-        cursor: !isTextTyped ? 'pointer' : 'default',
-      }}
-      onClick={() => {
-        if (!isTextTyped) {
-          setIsTextTyped(true);
-        }
-      }}
-    >
-      <Avatar>
-        <img src="images/ai-avatar.svg" />
-        <img src="images/ai-avatar-text.svg" className="text" />
-      </Avatar>
-      <Box
+    <Stack>
+      <Stack sx={{ alignItems: 'flex-start' }}>
+        <Typography variant="overline" color="text.secondary">
+          <TimeAgo date={message.timestamp} />
+        </Typography>
+      </Stack>
+      <Stack
         sx={{
-          backgroundColor: theme.palette.grey[850],
-          py: 1,
-          px: 2,
-          my: 2,
-          maxWidth: '80%',
-          width: 'fit-content',
-          borderRadius: '20px',
-          borderTopLeftRadius: '3px',
-          justifySelf: 'flex-start',
-          wordWrap: 'break-word',
-          marginLeft: -1,
-          height: '100%',
-          overflow: 'hidden',
+          flexDirection: 'row',
+          cursor: !isTextTyped ? 'pointer' : 'default',
+        }}
+        onClick={() => {
+          if (!isTextTyped) {
+            setIsTextTyped(true);
+          }
         }}
       >
-        {!isTextTyped && (
-          <Typography>
-            <Typewriter
-              text={message.content}
-              scrollToBottom={scrollToBottom}
-              typingSpeed={typingSpeed}
-            />
-          </Typography>
-        )}
-        {isTextTyped && (
-          <Typography>
-            <ReactMarkdown>{message.content}</ReactMarkdown>
-          </Typography>
-        )}
-      </Box>
+        <Avatar>
+          <img src="images/ai-avatar.svg" />
+          <img src="images/ai-avatar-text.svg" className="text" />
+        </Avatar>
+        <Box
+          sx={{
+            backgroundColor: theme.palette.grey[850],
+            py: 1,
+            px: 2,
+            my: 2,
+            maxWidth: '80%',
+            width: 'fit-content',
+            borderRadius: '20px',
+            borderTopLeftRadius: '3px',
+            justifySelf: 'flex-start',
+            wordWrap: 'break-word',
+            marginLeft: -1,
+            height: '100%',
+            overflow: 'hidden',
+          }}
+        >
+          {!isTextTyped && (
+            <Typography>
+              <Typewriter
+                text={message.content}
+                scrollToBottom={scrollToBottom}
+                typingSpeed={typingSpeed}
+              />
+            </Typography>
+          )}
+          {isTextTyped && (
+            <Typography>
+              <ReactMarkdown>{message.content}</ReactMarkdown>
+            </Typography>
+          )}
+        </Box>
+      </Stack>
     </Stack>
   );
 };
 
 export const UserDialog = ({ message }) => {
   const theme = useTheme();
   return (
-    <Stack
-      sx={{
-        backgroundColor: theme.palette.common.white,
-        py: 1,
-        px: 2,
-        my: 1,
-        maxWidth: '80%',
-        width: 'fit-content',
-        borderRadius: '20px',
-        borderTopRightRadius: '3px',
-        alignSelf: 'flex-end',
-        wordWrap: 'break-word',
-        color: theme.palette.grey[900],
-      }}
-    >
-      <Typography>{message.content}</Typography>
+    <Stack>
+      <Stack sx={{ alignItems: 'flex-end' }}>
+        <Typography variant="overline" color="text.secondary">
+          <TimeAgo date={message.timestamp} />
+        </Typography>
+      </Stack>
+      <Stack
+        sx={{
+          backgroundColor: theme.palette.common.white,
+          py: 1,
+          px: 2,
+          my: 1,
+          maxWidth: '80%',
+          width: 'fit-content',
+          borderRadius: '20px',
+          borderTopRightRadius: '3px',
+          alignSelf: 'flex-end',
+          wordWrap: 'break-word',
+          color: theme.palette.grey[900],
+        }}
+      >
+        <Typography>{message.content}</Typography>
+      </Stack>
     </Stack>
   );
 };

yarn.lock

@@ -12747,6 +12747,7 @@ __metadata:
     react-router-dom: "npm:5.3.0"
     react-scripts: "npm:5.0.1"
     react-test-renderer: "npm:17.0.2"
+    react-timeago: "npm:^8.2.0"
     react-timer-hook: "npm:3.0.5"
     react-transition-group: "npm:4.4.2"
     react-virtualized: "npm:9.22.3"
@@ -28853,6 +28854,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-timeago@npm:^8.2.0":
+  version: 8.2.0
+  resolution: "react-timeago@npm:8.2.0"
+  peerDependencies:
+    react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/6616994851f673661b9db9be5eb91086734fda32055765a30a822e7ed4c7a4871660eb772fecaa2b64be8d68fe5043d37624cfd6cdd19b40aba72180ee786e18
+  languageName: node
+  linkType: hard
+
 "react-timer-hook@npm:3.0.5":
   version: 3.0.5
   resolution: "react-timer-hook@npm:3.0.5"