From 9d67e279f7b8ee18c2705f4d97b493d80c0f27cb Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Wed, 6 Nov 2024 20:24:07 -0600
Subject: [PATCH] refine copy msg

---
 .../[conversationId]/chat-box.svelte          | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 4c07cf80..1dfe8291 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -1177,20 +1177,11 @@
 	function copyMessage(e, message) {
 		e.preventDefault();
 
-		const elem = document.getElementById(`message-note-${message.message_id}`);
-		if (!elem) return;
-
 		const text = message?.rich_content?.message?.text || message?.text || '';
-		elem.classList.remove('hide');
 		
 		navigator.clipboard.writeText(text).then(() => {
-			elem.textContent = 'Copied!';
-		}).catch(() => {
-			elem.textContent = 'Error!';
-		}).finally(() => {
-			copyClicked = false;
 			setTimeout(() => {
-				elem.classList.add('hide');
+				copyClicked = false;
 			}, 800);
 		});
 	}
@@ -1701,11 +1692,11 @@
 																	</div>
 																</div>
 															{/if}
-															<div class="line-align-center" style="font-size: 17px;">
+															<div style="font-size: 17px;">
 																<!-- svelte-ignore a11y-click-events-have-key-events -->
 																<!-- svelte-ignore a11y-no-static-element-interactions -->
 																<div
-																	class="clickable"
+																	class="line-align-center text-primary"
 																	style="height: 85%;"
 																	data-bs-toggle="tooltip"
 																	data-bs-placement="top"
@@ -1714,18 +1705,19 @@
 																	on:mousedown={() => copyClicked = true}
 																>
 																	{#if copyClicked}
-																		<i class="bx bxs-copy text-primary" />
+																		<div class="div-center">
+																			<div class="line-align-center">
+																				<i class="bx bx-check" /> 
+																			</div>
+																			<div class="line-align-center">
+																				<span style="font-size: 10px;">{'Copied!'}</span>
+																			</div>
+																		</div>
 																	{:else}
-																		<i class="bx bx-copy text-primary" />
+																		<i class="bx bx-copy clickable" />
 																	{/if}
 																</div>
 															</div>
-															<div
-																class="line-align-center text-primary hide"
-																style={'font-size: 0.8em;'}
-																id={`message-note-${message.message_id}`}
-															>
-															</div>
 														</div>
 													{/if}
 													{#if !!message.is_chat_message || !!message.has_message_files}