User Portal processing time and message timestamps

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
             };
@@ -864,7 +870,8 @@ private async Task<Message> ProcessCompletionResponse(
                     { "/contentArtifacts", completionResponse.ContentArtifacts },
                     { "/content", newContent },
                     { "/analysisResults", completionResponse.AnalysisResults },
-                    { "/status", operationStatus }
+                    { "/status", operationStatus },
+                    { "/timeStamp", DateTime.UtcNow }
                 }
             },
             new PatchOperationItem<CompletionPrompt>

src/ui/UserPortal/components/ChatMessage.vue

@@ -29,12 +29,12 @@
 							}"
 						/>
 						<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">
-									{{ formatTimeStamp(message.timeStamp) }}
+									{{ buildTimeStampTooltip(message.timeStamp, message.processingTime) }}
 								</div>
 							</template>
 						</VTooltip>
@@ -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;
@@ -409,7 +410,7 @@ export default {
 		messageDisplayStatus() {
 			if (
 				this.message.status === 'Failed' ||
-				(this.message.status === 'Completed' && !this.isRenderingMessage)
+				(this.message.status === 'Completed')
 			)
 				return null;
 
@@ -681,6 +682,13 @@ export default {
 			return date.toLocaleString(undefined, options);
 		},
 
+		buildTimeStampTooltip(timeStamp: string, processingTime: number) {
+			const date = this.formatTimeStamp(timeStamp);
+			if (!processingTime) return date;
+			const processingTimeSeconds = processingTime / 1000;
+			return `${date}\n(${processingTimeSeconds.toFixed(2)} seconds)`;
+		},
+
 		getDisplayName() {
 			return this.message.sender === 'User'
 				? this.message.senderDisplayName

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>
+

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;
@@ -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

src/ui/UserPortal/stores/appStore.ts

@@ -297,6 +297,19 @@ export const useAppStore = defineStore('app', {
 					this.startPolling(latestMessage, this.currentSession.id);
 				}
 			}
+
+			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') {
+					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) {
@@ -475,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);
 					}