refactor(ux): Enhance podcast and chat panel features

- Updated the welcome dialog in podcast generation to reflect the correct podcast title.
- Improved the Dashboard layout by adding an indicator for active chats on the researcher page.
- Enhanced the breadcrumb component to fetch and display chat details dynamically.
- Adjusted the chat panel width for better visibility.
- Introduced animations and improved user interactions in the chat panel and podcast player components.
- Updated the ConfigModal to provide clearer instructions for user input.

surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { Loader2, PanelRight } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
 import { usePathname, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import type React from "react";
@@ -16,6 +17,7 @@ import { Separator } from "@/components/ui/separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { useLLMPreferences } from "@/hooks/use-llm-configs";
 import { cn } from "@/lib/utils";
+import { activeChatIdAtom } from "@/stores/chat/active-chat.atom";
 import { chatUIAtom } from "@/stores/chat/chat-ui.atom";
 
 export function DashboardClientLayout({
@@ -35,9 +37,26 @@ export function DashboardClientLayout({
 	const searchSpaceIdNum = Number(searchSpaceId);
 
 	const [chatUIState, setChatUIState] = useAtom(chatUIAtom);
+	const activeChatId = useAtomValue(activeChatIdAtom);
+	const [showIndicator, setShowIndicator] = useState(false);
 
 	const { isChatPannelOpen } = chatUIState;
 
+	// Check if we're on the researcher page
+	const isResearcherPage = pathname?.includes("/researcher");
+
+	// Show indicator when chat becomes active and panel is closed
+	useEffect(() => {
+		if (activeChatId && !isChatPannelOpen) {
+			setShowIndicator(true);
+			// Hide indicator after 5 seconds
+			const timer = setTimeout(() => setShowIndicator(false), 5000);
+			return () => clearTimeout(timer);
+		} else {
+			setShowIndicator(false);
+		}
+	}, [activeChatId, isChatPannelOpen]);
+
 	const { loading, error, isOnboardingComplete } = useLLMPreferences(searchSpaceIdNum);
 	const [hasCheckedOnboarding, setHasCheckedOnboarding] = useState(false);
 
@@ -161,24 +180,112 @@ export function DashboardClientLayout({
 								<div className="flex items-center gap-2">
 									<LanguageSwitcher />
 									<ThemeTogglerComponent />
-									<button
-										type="button"
-										onClick={() =>
-											setChatUIState((prev) => ({
-												...prev,
-												isChatPannelOpen: !isChatPannelOpen,
-											}))
-										}
-										className={cn(" shrink-0 rounded-full w-fit hover:bg-muted")}
-									>
-										<PanelRight className="h-4 w-4" />
-									</button>
+									{/* Only show artifacts toggle on researcher page */}
+									{isResearcherPage && (
+										<motion.div
+											className="relative"
+											animate={
+												showIndicator
+													? {
+															scale: [1, 1.05, 1],
+														}
+													: {}
+											}
+											transition={{
+												duration: 2,
+												repeat: showIndicator ? Number.POSITIVE_INFINITY : 0,
+												ease: "easeInOut",
+											}}
+										>
+											<motion.button
+												type="button"
+												onClick={() => {
+													setChatUIState((prev) => ({
+														...prev,
+														isChatPannelOpen: !isChatPannelOpen,
+													}));
+													setShowIndicator(false);
+												}}
+												className={cn(
+													"shrink-0 rounded-full p-2 transition-all duration-300 relative",
+													showIndicator
+														? "bg-primary/20 hover:bg-primary/30 shadow-lg shadow-primary/25"
+														: "hover:bg-muted",
+													activeChatId && !showIndicator && "hover:bg-primary/10"
+												)}
+												title="Toggle Artifacts Panel"
+												whileHover={{ scale: 1.05 }}
+												whileTap={{ scale: 0.95 }}
+											>
+												<motion.div
+													animate={
+														showIndicator
+															? {
+																	rotate: [0, -10, 10, -10, 0],
+																}
+															: {}
+													}
+													transition={{
+														duration: 0.5,
+														repeat: showIndicator ? Number.POSITIVE_INFINITY : 0,
+														repeatDelay: 2,
+													}}
+												>
+													<PanelRight
+														className={cn(
+															"h-4 w-4 transition-colors",
+															showIndicator && "text-primary"
+														)}
+													/>
+												</motion.div>
+											</motion.button>
+
+											{/* Pulsing indicator badge */}
+											<AnimatePresence>
+												{showIndicator && (
+													<motion.div
+														initial={{ opacity: 0, scale: 0 }}
+														animate={{ opacity: 1, scale: 1 }}
+														exit={{ opacity: 0, scale: 0 }}
+														className="absolute -right-1 -top-1 pointer-events-none"
+													>
+														<motion.div
+															animate={{
+																scale: [1, 1.3, 1],
+															}}
+															transition={{
+																duration: 1.5,
+																repeat: Number.POSITIVE_INFINITY,
+																ease: "easeInOut",
+															}}
+															className="relative"
+														>
+															<div className="h-2.5 w-2.5 rounded-full bg-primary shadow-lg" />
+															<motion.div
+																animate={{
+																	scale: [1, 2.5, 1],
+																	opacity: [0.6, 0, 0.6],
+																}}
+																transition={{
+																	duration: 1.5,
+																	repeat: Number.POSITIVE_INFINITY,
+																	ease: "easeInOut",
+																}}
+																className="absolute inset-0 h-2.5 w-2.5 rounded-full bg-primary"
+															/>
+														</motion.div>
+													</motion.div>
+												)}
+											</AnimatePresence>
+										</motion.div>
+									)}
 								</div>
 							</div>
 						</header>
 						<div className="grow flex-1 overflow-auto">{children}</div>
 					</div>
-					<ChatPanelContainer />
+					{/* Only render chat panel on researcher page */}
+					{isResearcherPage && <ChatPanelContainer />}
 				</main>
 			</SidebarInset>
 		</SidebarProvider>