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"> <div class="flex-auto w-0 pl-1">
<Name> <Name>
<Tooltip content={model?.name ?? message.model} placement="top-start"> <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} {model?.name ?? message.model}
</span> </span>
</Tooltip> </Tooltip>

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

@ -68,42 +68,57 @@
try { try {
const isDarkMode = $theme.includes('dark'); // Check theme mode 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, useCORS: true,
backgroundColor: isDarkMode ? '#000' : '#fff', // Ensure proper background scale: 2, // Keep at 1x to avoid unexpected enlargements
scale: 2, // Enhance resolution width: virtualWidth, // Set fixed virtual screen width
height: containerElement.scrollHeight, windowWidth: virtualWidth, // Ensure consistent rendering
windowHeight: containerElement.scrollHeight windowHeight: virtualHeight
}); });
document.body.removeChild(clonedElement); // Clean up temp element
const imgData = canvas.toDataURL('image/png'); const imgData = canvas.toDataURL('image/png');
// A4 dimensions // A4 page settings
const pdf = new jsPDF('p', 'mm', 'a4'); const pdf = new jsPDF('p', 'mm', 'a4');
const imgWidth = 210; const imgWidth = 210; // A4 width in mm
const pageHeight = 297; 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 heightLeft = imgHeight;
let position = 0; let position = 0;
// Set page background color for dark mode // Set page background for dark mode
if (isDarkMode) { if (isDarkMode) {
pdf.setFillColor(0, 0, 0); // Black background for each page pdf.setFillColor(0, 0, 0);
pdf.rect(0, 0, imgWidth, pageHeight, 'F'); // Fill entire page pdf.rect(0, 0, imgWidth, pageHeight, 'F'); // Apply black bg
} }
// Add first page
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight; heightLeft -= pageHeight;
// Handle multiple pages // Handle additional pages
while (heightLeft > 0) { while (heightLeft > 0) {
position -= pageHeight; position -= pageHeight;
pdf.addPage(); pdf.addPage();
if (isDarkMode) { 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'); 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 downloadPdf = async () => {
const chat = await getChatById(localStorage.token, chatId); const chat = await getChatById(localStorage.token, chatId);
const containerElement = document.getElementById('messages-container'); const containerElement = document.getElementById('messages-container');
if (containerElement) { if (containerElement) {
try { try {
const isDarkMode = $theme.includes('dark'); // Check theme mode 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, useCORS: true,
backgroundColor: isDarkMode ? '#000' : '#fff', // Ensure proper background scale: 2, // Keep at 1x to avoid unexpected enlargements
scale: 2, // Enhance resolution width: virtualWidth, // Set fixed virtual screen width
height: containerElement.scrollHeight, windowWidth: virtualWidth, // Ensure consistent rendering
windowHeight: containerElement.scrollHeight windowHeight: virtualHeight
}); });
document.body.removeChild(clonedElement); // Clean up temp element
const imgData = canvas.toDataURL('image/png'); const imgData = canvas.toDataURL('image/png');
// A4 dimensions // A4 page settings
const pdf = new jsPDF('p', 'mm', 'a4'); const pdf = new jsPDF('p', 'mm', 'a4');
const imgWidth = 210; const imgWidth = 210; // A4 width in mm
const pageHeight = 297; 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 heightLeft = imgHeight;
let position = 0; let position = 0;
// Set page background color for dark mode // Set page background for dark mode
if (isDarkMode) { if (isDarkMode) {
pdf.setFillColor(0, 0, 0); // Black background for each page pdf.setFillColor(0, 0, 0);
pdf.rect(0, 0, imgWidth, pageHeight, 'F'); // Fill entire page pdf.rect(0, 0, imgWidth, pageHeight, 'F'); // Apply black bg
} }
// Add first page
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight; heightLeft -= pageHeight;
// Handle multiple pages // Handle additional pages
while (heightLeft > 0) { while (heightLeft > 0) {
position -= pageHeight; position -= pageHeight;
pdf.addPage(); pdf.addPage();
if (isDarkMode) { 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'); pdf.rect(0, 0, imgWidth, pageHeight, 'F');
} }