OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-03-15 18:00:18 +00:00
parent cfb2319923
commit b6e56c0e5a
3 changed files with 62 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@ -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>

45
src/lib/components/layout/Navbar/Menu.svelte
View File

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

46
src/lib/components/layout/Sidebar/ChatMenu.svelte
View File

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