Allow to view previous versions of messages

frontend/src/lang/fr.json

@@ -15,7 +15,8 @@
 		"placeholder": "Écrivez votre message ici...",
 		"sendError": "Erreur lors de l'envoi du message",
 		"disabled": "Cette session est accessible uniquement en lecture",
-		"edited": "modifié"
+		"edited": "modifié",
+		"history": "Historique"
 	},
 	"home": {
 		"date": "Date",
@@ -173,7 +174,8 @@
 		"thank-you": "Merci !",
 		"login": "Se connecter",
 		"cancel": "Annuler",
-		"save": "Sauvegarder"
+		"save": "Sauvegarder",
+		"close": "Fermer"
 	},
 	"utils": {
 		"month": {

frontend/src/lib/components/sessions/message.svelte

@@ -18,6 +18,8 @@
 	}
 	let isEdit = false;
 	let contentDiv: HTMLDivElement;
+	let historyModal: HTMLDialogElement;
+	$: messageVersions = message.versions;
 
 	function startEdit() {
 		isEdit = true;
@@ -95,9 +97,27 @@
 		<Icon src={Check} class="w-4 inline" />
 		{displayedTime}
 		{#if message.edited}
-			<span class="italic">
+			<button class="italic cursor-help" on:click={historyModal.showModal()}>
 				{$t('chatbox.edited')}
-			</span>
+			</button>
+			<dialog bind:this={historyModal} class="modal">
+				<div class="modal-box">
+					<h3 class="text-xl">{$t('chatbox.history')}</h3>
+					<div>
+						{#each $messageVersions as version}
+							<div class="flex justify-between items-center border-b border-gray-300 py-1">
+								<div>{version.content}</div>
+								<div class="whitespace-nowrap">{displayTime(version.date)}</div>
+							</div>
+						{/each}
+					</div>
+					<div class="modal-action">
+						<form method="dialog">
+							<button class="btn btn-primary">{$t('button.close')}</button>
+						</form>
+					</div>
+				</div>
+			</dialog>
 		{/if}
 	</div>
 </div>

frontend/src/lib/types/message.ts

@@ -2,6 +2,7 @@ import Session from './session';
 import User from './user';
 import { updateMessageAPI } from '$lib/api/sessions';
 import { toastAlert } from '$lib/utils/toasts';
+import { writable, type Writable } from 'svelte/store';
 
 export default class Message {
 	private _id: number;
@@ -11,6 +12,7 @@ export default class Message {
 	private _user: User;
 	private _session: Session;
 	private _edited: boolean = false;
+	private _versions = writable([] as { content: string; date: Date }[]);
 
 	public constructor(
 		id: number,
@@ -26,6 +28,7 @@ export default class Message {
 		this._created_at = created_at;
 		this._user = user;
 		this._session = session;
+		this._versions.set([{ content: content, date: created_at }]);
 	}
 
 	get id(): number {
@@ -56,10 +59,15 @@ export default class Message {
 		return this._edited;
 	}
 
+	get versions(): Writable<{ content: string; date: Date }[]> {
+		return this._versions;
+	}
+
 	async update(content: string, metadata: { message: string; date: number }[]): Promise<boolean> {
 		const response = await updateMessageAPI(this._session.id, this._message_id, content, metadata);
 		if (response == null || response.id == null) return false;
 
+		this._versions.update((v) => [...v, { content: content, date: new Date() }]);
 		this._content = content;
 		this._edited = true;
 
@@ -138,6 +146,7 @@ export default class Message {
 			}
 
 			if (prev.created_at < m.created_at) {
+				prev._versions.update((v) => [...v, { content: m.content, date: m.created_at }]);
 				prev._content = m.content;
 				prev._edited = true;
 			}