From 4ec81a897e2de087bf316d5c4046db35f816217d Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 17 Jan 2024 17:43:45 -0800
Subject: [PATCH] feat: message ts display

---
 src/lib/components/chat/Messages/Name.svelte            | 2 +-
 src/lib/components/chat/Messages/ResponseMessage.svelte | 7 +++++++
 src/lib/components/chat/Messages/UserMessage.svelte     | 8 ++++++++
 src/routes/(app)/+page.svelte                           | 6 +++---
 src/routes/(app)/c/[id]/+page.svelte                    | 6 +++---
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/chat/Messages/Name.svelte b/src/lib/components/chat/Messages/Name.svelte
index 4638e3b7..dea6ef84 100644
--- a/src/lib/components/chat/Messages/Name.svelte
+++ b/src/lib/components/chat/Messages/Name.svelte
@@ -1,3 +1,3 @@
-<div class=" self-center font-bold mb-0.5 capitalize">
+<div class=" self-center font-bold mb-0.5 capitalize line-clamp-1">
 	<slot />
 </div>
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 4dfcd61d..aa3f30b5 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import dayjs from 'dayjs';
 	import { marked } from 'marked';
 
 	import tippy from 'tippy.js';
@@ -219,6 +220,12 @@
 					>{message.model ? ` ${message.model}` : ''}</span
 				>
 			{/if}
+
+			{#if message.timestamp}
+				<span class=" invisible group-hover:visible text-gray-400 text-xs font-normal">
+					{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:MM')}
+				</span>
+			{/if}
 		</Name>
 
 		{#if message.content === ''}
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index ade2ae18..9adc813a 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import dayjs from 'dayjs';
+
 	import { tick } from 'svelte';
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
@@ -61,6 +63,12 @@
 				{:else}
 					You
 				{/if}
+
+				{#if message.timestamp}
+					<span class=" invisible group-hover:visible text-gray-400 text-xs font-normal">
+						{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:MM')}
+					</span>
+				{/if}
 			</Name>
 		</div>
 
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 2a13d020..e0be0757 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -146,7 +146,7 @@
 				user: _user ?? undefined,
 				content: userPrompt,
 				files: files.length > 0 ? files : undefined,
-				timestamp: Date.now()
+				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 			};
 
 			// Add message to history and Set currentId to messageId
@@ -258,7 +258,7 @@
 			role: 'assistant',
 			content: '',
 			model: model,
-			timestamp: Date.now()
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		// Add message to history and Set currentId to messageId
@@ -449,7 +449,7 @@
 			role: 'assistant',
 			content: '',
 			model: model,
-			timestamp: Date.now()
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		history.messages[responseMessageId] = responseMessage;
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index fffdd213..e0a79e35 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -165,7 +165,7 @@
 				user: _user ?? undefined,
 				content: userPrompt,
 				files: files.length > 0 ? files : undefined,
-				timestamp: Date.now()
+				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 			};
 
 			// Add message to history and Set currentId to messageId
@@ -276,7 +276,7 @@
 			role: 'assistant',
 			content: '',
 			model: model,
-			timestamp: Date.now()
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		// Add message to history and Set currentId to messageId
@@ -467,7 +467,7 @@
 			role: 'assistant',
 			content: '',
 			model: model,
-			timestamp: Date.now()
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		history.messages[responseMessageId] = responseMessage;