From 33b9629164437f5e72d268aa0134114580b87ba5 Mon Sep 17 00:00:00 2001
From: Jonathan Rohde <jonathan.rohde@iits-consulting.de>
Date: Tue, 14 May 2024 15:14:47 +0200
Subject: [PATCH] fix: prevent loop when fetching shared chat id

---
 cypress/e2e/chat.cy.ts                        | 33 +++++++++++++++++++
 src/lib/components/chat/ShareChatModal.svelte | 16 ++++++++-
 src/lib/components/layout/Navbar.svelte       |  1 +
 src/lib/components/layout/Navbar/Menu.svelte  |  1 +
 4 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/chat.cy.ts b/cypress/e2e/chat.cy.ts
index f46bef57b..6f5fa36c9 100644
--- a/cypress/e2e/chat.cy.ts
+++ b/cypress/e2e/chat.cy.ts
@@ -42,5 +42,38 @@ describe('Settings', () => {
 				.find('div[aria-label="Generation Info"]', { timeout: 120_000 }) // Generation Info is created after the stop token is received
 				.should('exist');
 		});
+
+		it('user can share chat', () => {
+			// Click on the model selector
+			cy.get('button[aria-label="Select a model"]').click();
+			// Select the first model
+			cy.get('button[aria-label="model-item"]').first().click();
+			// Type a message
+			cy.get('#chat-textarea').type('Hi, what can you do? A single sentence only please.', {
+				force: true
+			});
+			// Send the message
+			cy.get('button[type="submit"]').click();
+			// User's message should be visible
+			cy.get('.chat-user').should('exist');
+			// Wait for the response
+			cy.get('.chat-assistant', { timeout: 120_000 }) // .chat-assistant is created after the first token is received
+				.find('div[aria-label="Generation Info"]', { timeout: 120_000 }) // Generation Info is created after the stop token is received
+				.should('exist');
+			// spy on requests
+			const spy = cy.spy();
+			cy.intercept("GET", "/api/v1/chats/*", spy);
+			// Open context menu
+			cy.get('#chat-context-menu-button').click();
+			// Click share button
+			cy.get('#chat-share-button').click();
+			// Check if the share dialog is visible
+			cy.get('#copy-and-share-chat-button').should('exist');
+			cy.wrap({}, { timeout: 5000 })
+				.should(() => {
+					// Check if the request was made twice (once for to replace chat object and once more due to change event)
+					expect(spy).to.be.callCount(2);
+				});
+		});
 	});
 });
diff --git a/src/lib/components/chat/ShareChatModal.svelte b/src/lib/components/chat/ShareChatModal.svelte
index 50f38d8a9..ebb0f171d 100644
--- a/src/lib/components/chat/ShareChatModal.svelte
+++ b/src/lib/components/chat/ShareChatModal.svelte
@@ -57,10 +57,23 @@
 
 	export let show = false;
 
+	const isDifferentChat = (_chat) => {
+		if (!chat) {
+			return true;
+		}
+		if (!_chat) {
+			return false;
+		}
+		return chat.id !== _chat.id || chat.share_id !== _chat.share_id;
+	}
+
 	$: if (show) {
 		(async () => {
 			if (chatId) {
-				chat = await getChatById(localStorage.token, chatId);
+				const _chat = await getChatById(localStorage.token, chatId);
+				if (isDifferentChat(_chat)) {
+					chat = _chat;
+				}
 			} else {
 				chat = null;
 				console.log(chat);
@@ -137,6 +150,7 @@
 							<button
 								class=" self-center flex items-center gap-1 px-3.5 py-2 rounded-xl text-sm font-medium bg-emerald-600 hover:bg-emerald-500 text-white"
 								type="button"
+								id="copy-and-share-chat-button"
 								on:click={async () => {
 									const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 57b09a19b..d1a721901 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -82,6 +82,7 @@
 					>
 						<button
 							class="cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-full transition"
+							id="chat-context-menu-button"
 						>
 							<div class=" m-auto self-center">
 								<svg
diff --git a/src/lib/components/layout/Navbar/Menu.svelte b/src/lib/components/layout/Navbar/Menu.svelte
index 26a7134a5..844730fb9 100644
--- a/src/lib/components/layout/Navbar/Menu.svelte
+++ b/src/lib/components/layout/Navbar/Menu.svelte
@@ -113,6 +113,7 @@
 			{#if shareEnabled}
 				<DropdownMenu.Item
 					class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer dark:hover:bg-gray-850 rounded-md"
+					id="chat-share-button"
 					on:click={() => {
 						shareHandler();
 					}}