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');
}