Merge pull request #505 from ollama-webui/message-ts

feat: message ts

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>

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-medium">
+					{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:MM')}
+				</span>
+			{/if}
 		</Name>
 
 		{#if message.content === ''}

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-medium">
+						{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:MM')}
+					</span>
+				{/if}
 			</Name>
 		</div>
 

src/routes/(app)/+page.svelte

@@ -145,7 +145,8 @@
 				role: 'user',
 				user: _user ?? undefined,
 				content: userPrompt,
-				files: files.length > 0 ? files : undefined
+				files: files.length > 0 ? files : undefined,
+				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 			};
 
 			// Add message to history and Set currentId to messageId
@@ -256,7 +257,8 @@
 			childrenIds: [],
 			role: 'assistant',
 			content: '',
-			model: model
+			model: model,
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		// Add message to history and Set currentId to messageId
@@ -446,7 +448,8 @@
 			childrenIds: [],
 			role: 'assistant',
 			content: '',
-			model: model
+			model: model,
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		history.messages[responseMessageId] = responseMessage;

src/routes/(app)/c/[id]/+page.svelte

@@ -135,8 +135,7 @@
 	// Ollama functions
 	//////////////////////////
 
-	const submitPrompt = async (userPrompt, user) => {
-		console.log(userPrompt, user);
+	const submitPrompt = async (userPrompt, _user = null) => {
 		console.log('submitPrompt', $chatId);
 
 		if (selectedModels.includes('')) {
@@ -163,8 +162,10 @@
 				parentId: messages.length !== 0 ? messages.at(-1).id : null,
 				childrenIds: [],
 				role: 'user',
+				user: _user ?? undefined,
 				content: userPrompt,
-				files: files.length > 0 ? files : undefined
+				files: files.length > 0 ? files : undefined,
+				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 			};
 
 			// Add message to history and Set currentId to messageId
@@ -200,15 +201,7 @@
 					await chatId.set('local');
 				}
 				await tick();
-			} else if (chat.chat["models"] != selectedModels) {
-				// If model is not saved in DB, then save selectedmodel when message is sent
-
-				chat = await updateChatById(localStorage.token, $chatId, {
-						models: selectedModels
-					});
-				await chats.set(await getChatList(localStorage.token));
 			}
-			
 			// Reset chat input textarea
 			prompt = '';
 			files = [];
@@ -282,7 +275,8 @@
 			childrenIds: [],
 			role: 'assistant',
 			content: '',
-			model: model
+			model: model,
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		// Add message to history and Set currentId to messageId
@@ -472,7 +466,8 @@
 			childrenIds: [],
 			role: 'assistant',
 			content: '',
-			model: model
+			model: model,
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
 		};
 
 		history.messages[responseMessageId] = responseMessage;
@@ -703,7 +698,10 @@
 	<div class="min-h-screen w-full flex justify-center">
 		<div class=" py-2.5 flex flex-col justify-between w-full">
 			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
-				<ModelSelector bind:selectedModels disabled={messages.length > 0 && !selectedModels.includes('')} />
+				<ModelSelector
+					bind:selectedModels
+					disabled={messages.length > 0 && !selectedModels.includes('')}
+				/>
 			</div>
 
 			<div class=" h-full mt-10 mb-32 w-full flex flex-col">