diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte index 2c99ad17c..1af5140dc 100644 --- a/src/lib/components/chat/Messages/ResponseMessage.svelte +++ b/src/lib/components/chat/Messages/ResponseMessage.svelte @@ -559,7 +559,7 @@
- + {model?.name ?? message.model} diff --git a/src/lib/components/layout/Navbar/Menu.svelte b/src/lib/components/layout/Navbar/Menu.svelte index 84ee8b643..322419159 100644 --- a/src/lib/components/layout/Navbar/Menu.svelte +++ b/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'); } diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte index 3e6422676..395b0ec3a 100644 --- a/src/lib/components/layout/Sidebar/ChatMenu.svelte +++ b/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'); }