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/components/chat/ChatPanel/ConfigModal.tsx

@@ -44,8 +44,20 @@ export function ConfigModal(props: ConfigModalProps) {
 			<PopoverContent onClick={(e) => e.stopPropagation()} align="end" className="bg-sidebar w-96 ">
 				<form className="flex flex-col gap-3 w-full">
 					<label className="text-sm font-medium" htmlFor="prompt">
-						What subjects should the AI cover in this podcast ?
+						Special user instructions
 					</label>
+					<p className="text-xs text-slate-500 dark:text-slate-400">
+						Leave empty to use the default prompt
+					</p>
+					<div className="text-xs text-slate-500 dark:text-slate-400 space-y-1">
+						<p>Examples:</p>
+						<ul className="list-disc list-inside space-y-0.5">
+							<li>Make hosts speak in London street language</li>
+							<li>Use real-world analogies and metaphors</li>
+							<li>Add dramatic pauses like a late-night radio show</li>
+							<li>Include 90s pop culture references</li>
+						</ul>
+					</div>
 
 					<textarea
 						name="prompt"