refac

src/lib/components/layout/Sidebar/ChatItem.svelte

@@ -27,7 +27,8 @@
 		showSidebar,
 		currentChatPage,
 		tags,
-		selectedFolder
+		selectedFolder,
+		activeChatIds
 	} from '$lib/stores';
 
 	import ChatMenu from './ChatMenu.svelte';
@@ -41,13 +42,14 @@
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import Document from '$lib/components/icons/Document.svelte';
 	import Sparkles from '$lib/components/icons/Sparkles.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 	import { generateTitle } from '$lib/apis';
 
 	export let className = '';
 
 	export let id;
 	export let title;
-	export let updatedAt: number | null = null;
+	export let createdAt: number | null = null;
 
 	export let selected = false;
 	export let shiftKey = false;
@@ -73,6 +75,7 @@
 		return '1m';
 	}
 
+
 	let chat = null;
 
 	let mouseOver = false;
@@ -443,6 +446,13 @@
 			on:focus={(e) => {}}
 			draggable="false"
 		>
+			<!-- Loading spinner for active chat (left side) -->
+			{#if $activeChatIds.has(id)}
+				<div class="shrink-0 self-center pr-2">
+					<Spinner className="size-3" />
+				</div>
+			{/if}
+
 			<div class="flex self-center flex-1 w-full min-w-0">
 				<div dir="auto" class="text-left self-center overflow-hidden w-full h-[20px] truncate">
 					{title}
@@ -450,9 +460,9 @@
 			</div>
 
 			<!-- Time ago indicator -->
-			{#if updatedAt && !mouseOver}
+			{#if createdAt && !mouseOver}
 				<div class="shrink-0 self-center text-[10px] text-gray-400 dark:text-gray-500 pl-2">
-					{formatTimeAgo(updatedAt)}
+					{formatTimeAgo(createdAt)}
 				</div>
 			{/if}
 		</a>