feat: improved onboarding

surfsense_web/components/chat/ChatPanel/ChatPanelView.tsx

@@ -78,17 +78,11 @@ export function ChatPanelView(props: ChatPanelViewProps) {
 							initial={{ opacity: 0 }}
 							animate={{ opacity: 1 }}
 							transition={{ duration: 0.3 }}
+							className="relative"
 						>
-							<div
-								role="button"
-								tabIndex={0}
+							<button
+								type="button"
 								onClick={handleGeneratePost}
-								onKeyDown={(e) => {
-									if (e.key === "Enter" || e.key === " ") {
-										e.preventDefault();
-										handleGeneratePost();
-									}
-								}}
 								className={cn(
 									"relative w-full rounded-2xl p-4 transition-all duration-300 cursor-pointer group overflow-hidden",
 									"border-2",
@@ -151,9 +145,12 @@ export function ChatPanelView(props: ChatPanelViewProps) {
 												</p>
 											</div>
 										</div>
-										<ConfigModal generatePodcast={generatePodcast} />
 									</div>
 								</div>
+							</button>
+							{/* ConfigModal positioned absolutely to avoid nesting buttons */}
+							<div className="absolute top-4 right-4 z-20">
+								<ConfigModal generatePodcast={generatePodcast} />
 							</div>
 						</motion.div>
 					</div>

surfsense_web/components/chat/DocumentsDataTable.tsx

@@ -7,7 +7,8 @@ import {
 	type SortingState,
 	useReactTable,
 } from "@tanstack/react-table";
-import { ArrowUpDown, Calendar, FileText, Filter, Search } from "lucide-react";
+import { ArrowUpDown, Calendar, FileText, Filter, Plus, Search } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -177,6 +178,7 @@ export function DocumentsDataTable({
 	onDone,
 	initialSelectedDocuments = [],
 }: DocumentsDataTableProps) {
+	const router = useRouter();
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [search, setSearch] = useState("");
 	const debouncedSearch = useDebounced(search, 300);
@@ -527,11 +529,26 @@ export function DocumentsDataTable({
 									))
 								) : (
 									<TableRow>
-										<TableCell
-											colSpan={columns.length}
-											className="h-32 text-center text-muted-foreground text-sm"
-										>
-											No documents found.
+										<TableCell colSpan={columns.length} className="h-64">
+											<div className="flex flex-col items-center justify-center gap-4 py-8">
+												<div className="rounded-full bg-muted p-3">
+													<FileText className="h-6 w-6 text-muted-foreground" />
+												</div>
+												<div className="space-y-2 text-center max-w-sm">
+													<h3 className="font-semibold">No documents found</h3>
+													<p className="text-sm text-muted-foreground">
+														Get started by adding your first data source to build your knowledge
+														base.
+													</p>
+												</div>
+												<Button
+													size="sm"
+													onClick={() => router.push(`/dashboard/${searchSpaceId}/sources/add`)}
+												>
+													<Plus className="mr-2 h-4 w-4" />
+													Add Sources
+												</Button>
+											</div>
 										</TableCell>
 									</TableRow>
 								)}