cleanup: chat scroll, tanstack query for device sessions and data export

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/tabs/settings-tab.tsx

@@ -91,7 +91,7 @@ export function WebsiteSettingsTab({
 	const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 	const [showEditDialog, setShowEditDialog] = useState(false);
 	// Data export hook
-	const { exportData, isExporting } = useDataExport({
+	const dataExportMutation = useDataExport({
 		websiteId,
 		websiteName: websiteData?.name || undefined,
 	});

apps/dashboard/app/(main)/websites/[id]/assistant/components/chat-section.tsx

@@ -113,17 +113,12 @@ export default function ChatSection() {
 		}
 	}, [isLoading]);
 
-	useEffect(() => {
-		if (bottomRef.current) {
-			bottomRef.current.scrollIntoView({ behavior: 'auto' });
-		}
-	}, []);
-
+	// Auto-scroll to bottom when messages change
 	useEffect(() => {
 		if (bottomRef.current) {
 			bottomRef.current.scrollIntoView({ behavior: 'smooth' });
 		}
-	}, []);
+	}, [messages.length]);
 
 	const hasMessages = messages.length > 1;
 

apps/dashboard/hooks/use-data-export.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
 export type ExportFormat = 'json' | 'csv' | 'txt' | 'proto';
@@ -16,70 +16,88 @@ interface ExportParams {
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL;
 
-export function useDataExport({ websiteId, websiteName }: UseDataExportOptions) {
-	const [isExporting, setIsExporting] = useState(false);
-
-	const exportData = useCallback(async ({ format = 'csv', startDate, endDate }: ExportParams) => {
-		setIsExporting(true);
-		
-		try {
-			const response = await fetch(`${API_BASE_URL}/v1/export/data`, {
-				method: 'POST',
-				credentials: 'include',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify({
-					website_id: websiteId,
-					format,
-					start_date: startDate,
-					end_date: endDate,
-				}),
-			});
-
-			if (!response.ok) {
-				const error = await response.json();
-				throw new Error(error.error || 'Export failed');
-			}
-
-			// Get filename from response headers if available
-			const contentDisposition = response.headers.get('Content-Disposition');
-			let filename = `${websiteName || 'website'}-export-${new Date().toISOString().split('T')[0]}.zip`;
-			
-			if (contentDisposition) {
-				const filenameMatch = contentDisposition.match(/filename="(.+)"/);
-				if (filenameMatch) {
-					filename = filenameMatch[1];
-				}
-			}
-
-			// Create blob and trigger download
-			const blob = await response.blob();
-			const url = window.URL.createObjectURL(blob);
-			const a = document.createElement('a');
-			a.href = url;
-			a.download = filename;
-			a.style.display = 'none';
-			document.body.appendChild(a);
-			a.click();
-			
-			// Cleanup
-			window.URL.revokeObjectURL(url);
-			document.body.removeChild(a);
+// Regex for extracting filename from Content-Disposition header
+const FILENAME_REGEX = /filename="(.+)"/;
 
-			toast.success('Data exported successfully!');
-			return { success: true, filename };
-		} catch (error) {
-			const errorMessage = error instanceof Error ? error.message : 'Export failed';
-			toast.error(errorMessage);
-			return { success: false, error: errorMessage };
-		} finally {
-			setIsExporting(false);
+// Helper function to handle file download
+function downloadFile(blob: Blob, filename: string) {
+	const url = window.URL.createObjectURL(blob);
+	const a = document.createElement('a');
+	a.href = url;
+	a.download = filename;
+	a.style.display = 'none';
+	document.body.appendChild(a);
+	a.click();
+
+	// Cleanup
+	window.URL.revokeObjectURL(url);
+	document.body.removeChild(a);
+}
+
+// Helper function to extract filename from response
+function getFilenameFromResponse(
+	response: Response,
+	websiteName?: string
+): string {
+	const contentDisposition = response.headers.get('Content-Disposition');
+	const defaultFilename = `${websiteName || 'website'}-export-${new Date().toISOString().split('T')[0]}.zip`;
+
+	if (contentDisposition) {
+		const filenameMatch = contentDisposition.match(FILENAME_REGEX);
+		if (filenameMatch) {
+			return filenameMatch[1];
 		}
-	}, [websiteId, websiteName]);
+	}
+
+	return defaultFilename;
+}
 
-	return {
-		exportData,
-		isExporting,
-	};
+// Main export function
+async function exportDataFromAPI(
+	websiteId: string,
+	websiteName: string | undefined,
+	{ format = 'csv', startDate, endDate }: ExportParams
+): Promise<{ filename: string }> {
+	const response = await fetch(`${API_BASE_URL}/v1/export/data`, {
+		method: 'POST',
+		credentials: 'include',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			website_id: websiteId,
+			format,
+			start_date: startDate,
+			end_date: endDate,
+		}),
+	});
+
+	if (!response.ok) {
+		const error = await response.json();
+		throw new Error(error.error || 'Export failed');
+	}
+
+	const filename = getFilenameFromResponse(response, websiteName);
+	const blob = await response.blob();
+
+	downloadFile(blob, filename);
+
+	return { filename };
+}
+
+export function useDataExport({
+	websiteId,
+	websiteName,
+}: UseDataExportOptions) {
+	return useMutation({
+		mutationFn: (params: ExportParams) =>
+			exportDataFromAPI(websiteId, websiteName, params),
+		onSuccess: () => {
+			toast.success('Data exported successfully!');
+		},
+		onError: (error: Error) => {
+			const errorMessage = error.message || 'Export failed';
+			toast.error(errorMessage);
+		},
+	});
 }