Small UI improvements and fixes

src/lib/components/CopyToClipBoardBtn.svelte

@@ -2,6 +2,7 @@
 	import { onDestroy } from "svelte";
 
 	import CarbonCopy from "~icons/carbon/copy";
+	import CarbonCheckmark from "~icons/carbon/checkmark";
 	import Tooltip from "./Tooltip.svelte";
 
 	interface Props {
@@ -67,6 +68,8 @@
 			clearTimeout(timeout);
 		}
 	});
+
+	const Icon = $derived(isSuccess ? CarbonCheckmark : CarbonCopy);
 </script>
 
 <button
@@ -79,8 +82,10 @@
 	}}
 >
 	<div class="relative">
-		{#if children}{@render children()}{:else}
-			<CarbonCopy class={iconClassNames} />
+		{#if children}
+			{@render children()}
+		{:else}
+			<Icon class={iconClassNames} />
 		{/if}
 
 		{#if showTooltip}

src/lib/components/NavMenu.svelte

@@ -149,6 +149,9 @@
 				{/each}
 			{/if}
 		{/each}
+		{#if conversations.length === 0}
+			<p class="text-sm text-gray-500 dark:text-gray-400">No conversations yet.</p>
+		{/if}
 	</div>
 	{#if hasMore}
 		<InfiniteScroll onvisible={handleVisible} />

src/lib/components/chat/ChatMessage.svelte

@@ -1,26 +1,20 @@
 <script lang="ts">
 	import type { Message } from "$lib/types/Message";
-	import { tick } from "svelte";
-
-	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
-	const publicConfig = usePublicConfig();
-	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
-	import IconLoading from "../icons/IconLoading.svelte";
-	import CarbonRotate360 from "~icons/carbon/rotate-360";
-	// import CarbonDownload from "~icons/carbon/download";
-
-	import CarbonPen from "~icons/carbon/pen";
-	import UploadedFile from "./UploadedFile.svelte";
-
 	import {
+		MessageReasoningUpdateType,
 		MessageUpdateType,
 		type MessageReasoningUpdate,
-		MessageReasoningUpdateType,
 	} from "$lib/types/MessageUpdate";
-	import MarkdownRenderer from "./MarkdownRenderer.svelte";
-	import OpenReasoningResults from "./OpenReasoningResults.svelte";
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+	import CarbonPen from "~icons/carbon/pen";
+	import CarbonRotate360 from "~icons/carbon/rotate-360";
+	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
+	import IconLoading from "../icons/IconLoading.svelte";
 	import Alternatives from "./Alternatives.svelte";
+	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 	import MessageAvatar from "./MessageAvatar.svelte";
+	import OpenReasoningResults from "./OpenReasoningResults.svelte";
+	import UploadedFile from "./UploadedFile.svelte";
 
 	interface Props {
 		message: Message;
@@ -48,8 +42,9 @@
 		onshowAlternateMsg,
 	}: Props = $props();
 
+	const publicConfig = usePublicConfig();
+
 	let contentEl: HTMLElement | undefined = $state();
-	let isCopied = $state(false);
 	let messageWidth: number = $state(0);
 	let messageInfoWidth: number = $state(0);
 
@@ -68,7 +63,6 @@
 		}
 	}
 
-	let editContentEl: HTMLTextAreaElement | undefined = $state();
 	let editFormEl: HTMLFormElement | undefined = $state();
 
 	let reasoningUpdates = $derived(
@@ -95,24 +89,8 @@
 	);
 	let hasClientThink = $derived(!hasServerReasoning && thinkSegments.length > 1);
 
-	$effect(() => {
-		if (isCopied) {
-			setTimeout(() => {
-				isCopied = false;
-			}, 1000);
-		}
-	});
-
 	let editMode = $derived(editMsdgId === message.id);
-	$effect(() => {
-		if (editMode) {
-			tick();
-			if (editContentEl) {
-				editContentEl.value = message.content;
-				editContentEl?.focus();
-			}
-		}
-	});
+	let editedContent = $derived(message.content);
 </script>
 
 {#if message.from === "assistant"}
@@ -223,9 +201,6 @@
 				{/if}
 				{#if !isLast || !loading}
 					<CopyToClipBoardBtn
-						onClick={() => {
-							isCopied = true;
-						}}
 						classNames="btn rounded-sm p-1 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
 						value={message.content}
 						iconClassNames="text-xs"
@@ -286,15 +261,14 @@
 						bind:this={editFormEl}
 						onsubmit={(e) => {
 							e.preventDefault();
-							onretry?.({ content: editContentEl?.value, id: message.id });
+							onretry?.({ content: editedContent, id: message.id });
 							editMsdgId = null;
 						}}
 					>
 						<textarea
 							class="w-full whitespace-break-spaces break-words rounded-xl bg-gray-100 px-5 py-3.5 text-gray-500 *:h-max focus:outline-none dark:bg-gray-800 dark:text-gray-400"
 							rows="5"
-							bind:this={editContentEl}
-							value={message.content.trim()}
+							bind:value={editedContent}
 							onkeydown={handleKeyDown}
 							required
 						></textarea>
@@ -334,7 +308,7 @@
 				{/if}
 				{#if (alternatives.length > 1 && editMsdgId === null) || (!loading && !editMode)}
 					<button
-						class="hidden cursor-pointer items-center gap-1 rounded-md border border-gray-200 px-1.5 py-0.5 text-xs text-gray-400 group-hover:flex hover:flex hover:text-gray-500 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300 lg:-right-2"
+						class="flex cursor-pointer items-center gap-1 rounded-md border border-gray-200 px-1.5 py-0.5 text-xs text-gray-400 opacity-0 group-hover:opacity-100 hover:text-gray-500 hover:opacity-100 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300 lg:-right-2"
 						title="Edit"
 						type="button"
 						onclick={() => (editMsdgId = message.id)}