From 0c3afde6eea38c7438885fcaaf21fc52d60eae64 Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Sat, 21 Dec 2024 14:17:52 -0500
Subject: [PATCH 1/5] Update the timestamp on the agent message

---
 src/dotnet/Core/Services/CoreService.cs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/dotnet/Core/Services/CoreService.cs b/src/dotnet/Core/Services/CoreService.cs
index 750941905..20b016640 100644
--- a/src/dotnet/Core/Services/CoreService.cs
+++ b/src/dotnet/Core/Services/CoreService.cs
@@ -864,7 +864,8 @@ private async Task<Message> ProcessCompletionResponse(
                     { "/contentArtifacts", completionResponse.ContentArtifacts },
                     { "/content", newContent },
                     { "/analysisResults", completionResponse.AnalysisResults },
-                    { "/status", operationStatus }
+                    { "/status", operationStatus },
+                    { "/timeStamp", DateTime.UtcNow }
                 }
             },
             new PatchOperationItem<CompletionPrompt>

From 7e4c0ea772520a0411992c34e1e7215c67d96d6a Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Sat, 21 Dec 2024 14:18:20 -0500
Subject: [PATCH 2/5] Calculate and display agent response times

---
 src/ui/UserPortal/components/ChatMessage.vue | 10 ++++++++--
 src/ui/UserPortal/js/types/index.ts          |  1 +
 src/ui/UserPortal/stores/appStore.ts         |  9 +++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
index 1099ed8f9..d6e15c0b3 100644
--- a/src/ui/UserPortal/components/ChatMessage.vue
+++ b/src/ui/UserPortal/components/ChatMessage.vue
@@ -34,7 +34,7 @@
 							}}</span>
 							<template #popper>
 								<div role="tooltip">
-									{{ formatTimeStamp(message.timeStamp) }}
+									{{ buildTimeStampTooltip(message.timeStamp, message.processingTime) }}
 								</div>
 							</template>
 						</VTooltip>
@@ -409,7 +409,7 @@ export default {
 		messageDisplayStatus() {
 			if (
 				this.message.status === 'Failed' ||
-				(this.message.status === 'Completed' && !this.isRenderingMessage)
+				(this.message.status === 'Completed')
 			)
 				return null;
 
@@ -681,6 +681,12 @@ export default {
 			return date.toLocaleString(undefined, options);
 		},
 
+		buildTimeStampTooltip(timeStamp: string, processingTime: number) {
+			const date = this.formatTimeStamp(timeStamp);
+			const processingTimeSeconds = processingTime / 1000;
+			return `Message sent at ${date}\nProcessing time: ${processingTimeSeconds.toFixed(2)} seconds`;
+		},
+
 		getDisplayName() {
 			return this.message.sender === 'User'
 				? this.message.senderDisplayName
diff --git a/src/ui/UserPortal/js/types/index.ts b/src/ui/UserPortal/js/types/index.ts
index f2771efb7..6d194ef09 100644
--- a/src/ui/UserPortal/js/types/index.ts
+++ b/src/ui/UserPortal/js/types/index.ts
@@ -66,6 +66,7 @@ export interface Message {
 	attachments: Array<string>;
 	attachmentDetails: Array<AttachmentDetail>;
 	analysisResults: Array<AnalysisResult>;
+	processingTime: number; // Calculated in milliseconds - not from the API
 }
 
 export interface MessageRatingRequest
diff --git a/src/ui/UserPortal/stores/appStore.ts b/src/ui/UserPortal/stores/appStore.ts
index eaa1fe177..05cced0a8 100644
--- a/src/ui/UserPortal/stores/appStore.ts
+++ b/src/ui/UserPortal/stores/appStore.ts
@@ -297,6 +297,15 @@ export const useAppStore = defineStore('app', {
 					this.startPolling(latestMessage, this.currentSession.id);
 				}
 			}
+
+			// Calculate the processing time for each message
+			this.currentMessages.forEach((message, index) => {
+				if (message.sender === 'Agent' && this.currentMessages[index - 1]?.sender === 'User') {
+					const previousMessageTimeStamp = new Date(this.currentMessages[index - 1].timeStamp).getTime();
+					const currentMessageTimeStamp = new Date(message.timeStamp).getTime();
+					message.processingTime = currentMessageTimeStamp - previousMessageTimeStamp;
+				}
+			});
 		},
 
 		async getMessage(messageId: string) {

From cc0c6d3b558a67576333b9c1b5c354a80b25efb2 Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Mon, 23 Dec 2024 12:04:05 -0500
Subject: [PATCH 3/5] Create TimeAgo component to better handle automatic
 updates

---
 src/ui/UserPortal/components/ChatMessage.vue | 12 +++---
 src/ui/UserPortal/components/TimeAgo.vue     | 42 ++++++++++++++++++++
 2 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 src/ui/UserPortal/components/TimeAgo.vue

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
index d6e15c0b3..1bd13ded9 100644
--- a/src/ui/UserPortal/components/ChatMessage.vue
+++ b/src/ui/UserPortal/components/ChatMessage.vue
@@ -29,9 +29,9 @@
 							}"
 						/>
 						<VTooltip :auto-hide="isMobile" :popper-triggers="isMobile ? [] : ['hover']">
-							<span class="time-stamp" tabindex="0" @keydown.esc="hideAllPoppers">{{
-								$filters.timeAgo(new Date(message.timeStamp))
-							}}</span>
+							<span class="time-stamp" tabindex="0" @keydown.esc="hideAllPoppers">
+								<TimeAgo :date="new Date(message.timeStamp)" />
+							</span>
 							<template #popper>
 								<div role="tooltip">
 									{{ buildTimeStampTooltip(message.timeStamp, message.processingTime) }}
@@ -186,7 +186,7 @@
 
 		<!-- Date Divider -->
 		<Divider v-if="message.sender == 'User'" align="center" type="solid" class="date-separator">
-			{{ $filters.timeAgo(new Date(message.timeStamp)) }}
+			<TimeAgo :date="new Date(message.timeStamp)" />
 		</Divider>
 
 		<!-- Analysis Modal -->
@@ -297,6 +297,7 @@ import { hideAllPoppers } from 'floating-vue';
 import type { Message, MessageContent, CompletionPrompt } from '@/js/types';
 import api from '@/js/api';
 import { fetchBlobUrl } from '@/js/fileService';
+import TimeAgo from '~/components/TimeAgo.vue';
 
 function processLatex(content) {
 	const blockLatexPattern = /\\\[\s*([\s\S]+?)\s*\\\]/g;
@@ -683,8 +684,9 @@ export default {
 
 		buildTimeStampTooltip(timeStamp: string, processingTime: number) {
 			const date = this.formatTimeStamp(timeStamp);
+			if (!processingTime) return date;
 			const processingTimeSeconds = processingTime / 1000;
-			return `Message sent at ${date}\nProcessing time: ${processingTimeSeconds.toFixed(2)} seconds`;
+			return `${date}\n(${processingTimeSeconds.toFixed(2)} seconds)`;
 		},
 
 		getDisplayName() {
diff --git a/src/ui/UserPortal/components/TimeAgo.vue b/src/ui/UserPortal/components/TimeAgo.vue
new file mode 100644
index 000000000..fc504fe73
--- /dev/null
+++ b/src/ui/UserPortal/components/TimeAgo.vue
@@ -0,0 +1,42 @@
+<template>
+    <span>{{ formattedTime }}</span>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onUnmounted, watchEffect } from 'vue';
+  import TimeAgo from 'javascript-time-ago';
+  
+  const props = defineProps({
+    date: {
+      type: Date,
+      required: true,
+    },
+    interval: {
+      type: Number,
+      default: 60000, // Update every 60 seconds
+    },
+  });
+  
+  const formattedTime = ref('');
+  const timeAgo = new TimeAgo('en-US');
+  
+  const updateFormattedTime = () => {
+    formattedTime.value = timeAgo.format(props.date);
+  };
+  
+  let timer;
+  onMounted(() => {
+    updateFormattedTime();
+    timer = setInterval(updateFormattedTime, props.interval);
+  });
+  
+  onUnmounted(() => {
+    clearInterval(timer);
+  });
+  
+  // Recompute if the date prop changes
+  watchEffect(() => {
+    updateFormattedTime();
+  });
+  </script>
+  
\ No newline at end of file

From 1588e6b369cb9f577950d87ef007ae4d918a7d55 Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Mon, 23 Dec 2024 12:04:28 -0500
Subject: [PATCH 4/5] Fix sender value constants

---
 src/ui/UserPortal/js/types/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/UserPortal/js/types/index.ts b/src/ui/UserPortal/js/types/index.ts
index 6d194ef09..ff277d25f 100644
--- a/src/ui/UserPortal/js/types/index.ts
+++ b/src/ui/UserPortal/js/types/index.ts
@@ -53,7 +53,7 @@ export interface Message {
 	type: string;
 	sessionId: string;
 	timeStamp: string;
-	sender: 'User' | 'Assistant';
+	sender: 'User' | 'Agent';
 	senderDisplayName: string | null;
 	tokens: number;
 	text: string;

From 604b6851607bf403786376c3a9e9a960129b1b80 Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Mon, 23 Dec 2024 12:05:04 -0500
Subject: [PATCH 5/5] Extract processing time calculation into a method

---
 src/dotnet/Core/Services/CoreService.cs | 14 ++++++++++----
 src/ui/UserPortal/stores/appStore.ts    |  6 ++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/dotnet/Core/Services/CoreService.cs b/src/dotnet/Core/Services/CoreService.cs
index 20b016640..597b2150f 100644
--- a/src/dotnet/Core/Services/CoreService.cs
+++ b/src/dotnet/Core/Services/CoreService.cs
@@ -276,7 +276,8 @@ public async Task<LongRunningOperation> GetCompletionOperationStatus(string inst
                         PropertyValues = new Dictionary<string, object?>
                         {
                             { "/status", OperationStatus.Failed },
-                            { "/text", "The completion operation has exceeded the maximum time allowed." }
+                            { "/text", "The completion operation has exceeded the maximum time allowed." },
+                            { "/timeStamp", DateTime.UtcNow }
                         }
                     }
                 };
@@ -294,7 +295,9 @@ public async Task<LongRunningOperation> GetCompletionOperationStatus(string inst
                     {
                         OperationId = operationId,
                         Status = OperationStatus.Failed,
-                        Text = "The completion operation has exceeded the maximum time allowed."
+                        Text = "The completion operation has exceeded the maximum time allowed.",
+                        TimeStamp = DateTime.UtcNow,
+                        SenderDisplayName = operationContext.AgentName
                     },
                     Status = OperationStatus.Failed
                 };
@@ -330,7 +333,9 @@ public async Task<LongRunningOperation> GetCompletionOperationStatus(string inst
             {
                 OperationId = operationId,
                 Status = operationStatus.Status,
-                Text = operationStatus.StatusMessage ?? "The completion operation is in progress."
+                Text = operationStatus.StatusMessage ?? "The completion operation is in progress.",
+                TimeStamp = DateTime.UtcNow,
+                SenderDisplayName = operationContext.AgentName
             };
 
             return operationStatus;
@@ -347,7 +352,8 @@ public async Task<LongRunningOperation> GetCompletionOperationStatus(string inst
                 {
                     OperationId = operationId,
                     Status = OperationStatus.Failed,
-                    Text = "Could not retrieve the status of the operation due to an internal error."
+                    Text = "Could not retrieve the status of the operation due to an internal error.",
+                    TimeStamp = DateTime.UtcNow
                 },
                 Status = OperationStatus.Failed
             };
diff --git a/src/ui/UserPortal/stores/appStore.ts b/src/ui/UserPortal/stores/appStore.ts
index 05cced0a8..fc02e780c 100644
--- a/src/ui/UserPortal/stores/appStore.ts
+++ b/src/ui/UserPortal/stores/appStore.ts
@@ -298,6 +298,10 @@ export const useAppStore = defineStore('app', {
 				}
 			}
 
+			this.calculateMessageProcessingTime();
+		},
+
+		calculateMessageProcessingTime() {
 			// Calculate the processing time for each message
 			this.currentMessages.forEach((message, index) => {
 				if (message.sender === 'Agent' && this.currentMessages[index - 1]?.sender === 'User') {
@@ -484,6 +488,8 @@ export const useAppStore = defineStore('app', {
 						userMessage.tokens = statusResponse.prompt_tokens;
 					}
 
+					this.calculateMessageProcessingTime();
+
 					if (updatedMessage.status === 'Completed' || updatedMessage.status === 'Failed') {
 						this.stopPolling(sessionId);
 					}