Browse Source

fix: prevent loop when fetching shared chat id

Jonathan Rohde 11 months ago
parent
commit
33b9629164

+ 33 - 0
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
 				.find('div[aria-label="Generation Info"]', { timeout: 120_000 }) // Generation Info is created after the stop token is received
 				.should('exist');
 				.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);
+				});
+		});
 	});
 	});
 });
 });

+ 15 - 1
src/lib/components/chat/ShareChatModal.svelte

@@ -57,10 +57,23 @@
 
 
 	export let show = false;
 	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) {
 	$: if (show) {
 		(async () => {
 		(async () => {
 			if (chatId) {
 			if (chatId) {
-				chat = await getChatById(localStorage.token, chatId);
+				const _chat = await getChatById(localStorage.token, chatId);
+				if (isDifferentChat(_chat)) {
+					chat = _chat;
+				}
 			} else {
 			} else {
 				chat = null;
 				chat = null;
 				console.log(chat);
 				console.log(chat);
@@ -137,6 +150,7 @@
 							<button
 							<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"
 								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"
 								type="button"
+								id="copy-and-share-chat-button"
 								on:click={async () => {
 								on:click={async () => {
 									const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 									const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 

+ 1 - 0
src/lib/components/layout/Navbar.svelte

@@ -82,6 +82,7 @@
 					>
 					>
 						<button
 						<button
 							class="cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-full transition"
 							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">
 							<div class=" m-auto self-center">
 								<svg
 								<svg

+ 1 - 0
src/lib/components/layout/Navbar/Menu.svelte

@@ -113,6 +113,7 @@
 			{#if shareEnabled}
 			{#if shareEnabled}
 				<DropdownMenu.Item
 				<DropdownMenu.Item
 					class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer dark:hover:bg-gray-850 rounded-md"
 					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={() => {
 					on:click={() => {
 						shareHandler();
 						shareHandler();
 					}}
 					}}