refac

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -559,7 +559,7 @@
 		<div class="flex-auto w-0 pl-1">
 			<Name>
 				<Tooltip content={model?.name ?? message.model} placement="top-start">
-					<span class="line-clamp-1">
+					<span class="line-clamp-1 text-black dark:text-white">
 						{model?.name ?? message.model}
 					</span>
 				</Tooltip>

src/lib/components/layout/Navbar/Menu.svelte

@@ -68,42 +68,57 @@
 			try {
 				const isDarkMode = $theme.includes('dark'); // Check theme mode
 
-				const canvas = await html2canvas(containerElement, {
+				// Define a fixed virtual screen size
+				const virtualWidth = 1024; // Fixed width (adjust as needed)
+				const virtualHeight = 1400; // Fixed height (adjust as needed)
+
+				// Clone the container to avoid layout shifts
+				const clonedElement = containerElement.cloneNode(true);
+				clonedElement.style.width = `${virtualWidth}px`; // Apply fixed width
+				clonedElement.style.height = 'auto'; // Allow content to expand
+
+				document.body.appendChild(clonedElement); // Temporarily add to DOM
+
+				// Render to canvas with predefined width
+				const canvas = await html2canvas(clonedElement, {
+					backgroundColor: isDarkMode ? '#000' : '#fff',
 					useCORS: true,
-					backgroundColor: isDarkMode ? '#000' : '#fff', // Ensure proper background
-					scale: 2, // Enhance resolution
-					height: containerElement.scrollHeight,
-					windowHeight: containerElement.scrollHeight
+					scale: 2, // Keep at 1x to avoid unexpected enlargements
+					width: virtualWidth, // Set fixed virtual screen width
+					windowWidth: virtualWidth, // Ensure consistent rendering
+					windowHeight: virtualHeight
 				});
 
+				document.body.removeChild(clonedElement); // Clean up temp element
+
 				const imgData = canvas.toDataURL('image/png');
 
-				// A4 dimensions
+				// A4 page settings
 				const pdf = new jsPDF('p', 'mm', 'a4');
-				const imgWidth = 210;
-				const pageHeight = 297;
+				const imgWidth = 210; // A4 width in mm
+				const pageHeight = 297; // A4 height in mm
 
-				const imgHeight = (canvas.height * imgWidth) / canvas.width; // Maintain aspect ratio
+				// Maintain aspect ratio
+				const imgHeight = (canvas.height * imgWidth) / canvas.width;
 				let heightLeft = imgHeight;
 				let position = 0;
 
-				// Set page background color for dark mode
+				// Set page background for dark mode
 				if (isDarkMode) {
-					pdf.setFillColor(0, 0, 0); // Black background for each page
-					pdf.rect(0, 0, imgWidth, pageHeight, 'F'); // Fill entire page
+					pdf.setFillColor(0, 0, 0);
+					pdf.rect(0, 0, imgWidth, pageHeight, 'F'); // Apply black bg
 				}
 
-				// Add first page
 				pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
 				heightLeft -= pageHeight;
 
-				// Handle multiple pages
+				// Handle additional pages
 				while (heightLeft > 0) {
 					position -= pageHeight;
 					pdf.addPage();
 
 					if (isDarkMode) {
-						pdf.setFillColor(0, 0, 0); // Ensure dark background for new pages
+						pdf.setFillColor(0, 0, 0);
 						pdf.rect(0, 0, imgWidth, pageHeight, 'F');
 					}
 

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

@@ -80,48 +80,64 @@
 
 	const downloadPdf = async () => {
 		const chat = await getChatById(localStorage.token, chatId);
+
 		const containerElement = document.getElementById('messages-container');
 
 		if (containerElement) {
 			try {
 				const isDarkMode = $theme.includes('dark'); // Check theme mode
 
-				const canvas = await html2canvas(containerElement, {
+				// Define a fixed virtual screen size
+				const virtualWidth = 1024; // Fixed width (adjust as needed)
+				const virtualHeight = 1400; // Fixed height (adjust as needed)
+
+				// Clone the container to avoid layout shifts
+				const clonedElement = containerElement.cloneNode(true);
+				clonedElement.style.width = `${virtualWidth}px`; // Apply fixed width
+				clonedElement.style.height = 'auto'; // Allow content to expand
+
+				document.body.appendChild(clonedElement); // Temporarily add to DOM
+
+				// Render to canvas with predefined width
+				const canvas = await html2canvas(clonedElement, {
+					backgroundColor: isDarkMode ? '#000' : '#fff',
 					useCORS: true,
-					backgroundColor: isDarkMode ? '#000' : '#fff', // Ensure proper background
-					scale: 2, // Enhance resolution
-					height: containerElement.scrollHeight,
-					windowHeight: containerElement.scrollHeight
+					scale: 2, // Keep at 1x to avoid unexpected enlargements
+					width: virtualWidth, // Set fixed virtual screen width
+					windowWidth: virtualWidth, // Ensure consistent rendering
+					windowHeight: virtualHeight
 				});
 
+				document.body.removeChild(clonedElement); // Clean up temp element
+
 				const imgData = canvas.toDataURL('image/png');
 
-				// A4 dimensions
+				// A4 page settings
 				const pdf = new jsPDF('p', 'mm', 'a4');
-				const imgWidth = 210;
-				const pageHeight = 297;
+				const imgWidth = 210; // A4 width in mm
+				const pageHeight = 297; // A4 height in mm
 
-				const imgHeight = (canvas.height * imgWidth) / canvas.width; // Maintain aspect ratio
+				// Maintain aspect ratio
+				const imgHeight = (canvas.height * imgWidth) / canvas.width;
 				let heightLeft = imgHeight;
 				let position = 0;
 
-				// Set page background color for dark mode
+				// Set page background for dark mode
 				if (isDarkMode) {
-					pdf.setFillColor(0, 0, 0); // Black background for each page
-					pdf.rect(0, 0, imgWidth, pageHeight, 'F'); // Fill entire page
+					pdf.setFillColor(0, 0, 0);
+					pdf.rect(0, 0, imgWidth, pageHeight, 'F'); // Apply black bg
 				}
 
-				// Add first page
 				pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
 				heightLeft -= pageHeight;
 
-				// Handle multiple pages
+				// Handle additional pages
 				while (heightLeft > 0) {
 					position -= pageHeight;
 					pdf.addPage();
 
 					if (isDarkMode) {
-						pdf.setFillColor(0, 0, 0); // Ensure dark background for new pages
+						pdf.setFillColor(0, 0, 0);
 						pdf.rect(0, 0, imgWidth, pageHeight, 'F');
 					}