fix some chat sizing and placing

This commit is contained in:
2026-03-04 21:14:54 +00:00
parent 0923de4259
commit 446606457c
4 changed files with 128 additions and 26 deletions

View File

@@ -1,23 +1,89 @@
/* Für den gesamten Body oder einen spezifischen Container */
main, body {
/* Versteckt die Scrollbar in Firefox */
scrollbar-width: none;
/* Versteckt die Scrollbar in IE und Edge */
-ms-overflow-style: none;
height: 100vh;
overflow: hidden;
}
/* Versteckt die Scrollbar in Chrome, Safari und Opera */
main::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}
/* --- Chat Container --- */
.chat-container {
margin-top: 45px;
flex: 1; /* Nimmt den verfügbaren Platz ein */
display: flex;
flex-direction: column;
background: var(--card-bg);
border-right: 1px solid var(--border-color);
}
/* --- Basis Layout für die Chat Seite --- */
.chat-main {
display: flex;
height: calc(100vh - 42px);
margin-top: 45px;
overflow: hidden;
}
.chat-input-area {
padding: 20px;
bottom: 0px;
background-color: var(--card-bg);
border-top: 1px solid var(--border-color);
display: flex;
gap: 10px;
align-items: center;
}
/* Kleiner visueller Indikator (zwei Punkte oder Linien) */
.resizer::after {
content: "⋮";
color: var(--text-muted);
font-weight: bold;
}
/*
#chat-container {
position: absolute; !important; Zwingend erforderlich!
display: flex;
flex-direction: column;}*/
.floating-export-btn {
/*position: relative;*/
position: absolute;
bottom: 100px;
right: 20px;
/*width: auto;*/
z-index: 1999 !important; /* unter theme menue */
display: none; /* Wird per JS auf 'block' gesetzt */
/* Styling zur Sichtbarkeit */
background: var(--accent);
color: var(--accent-text);
padding: 5px 10px;
border-radius: 4px;
border: none;
}
.floating-export-btn:hover {
opacity: 1;
background-color: var(--accent);
color: var(--accent-text);
border-color: var(--accent);
}
/* --- Artikel Sidebar --- */
.chat-article {
/* width: 40%; Breite des Artikels
max-width: 800px;*/
height: 100%;
margin-top: 45px;
flex: 1;
background: var(--bg-section-alt);
color: var(--text-main);
overflow-y: auto; /* Erlaubt vertikales Scrollen */
@@ -76,15 +142,7 @@
}
/* --- Chat Container --- */
.chat-container {
flex: 1; /* Nimmt den verfügbaren Platz ein */
display: flex;
flex-direction: column;
height: 100%;
background: var(--card-bg);
border-right: 1px solid var(--border-color);
}
/* --- System-Konfiguration Styling --- */
@@ -183,14 +241,7 @@
border-bottom-left-radius: 5px;
}
.chat-input-area {
padding: 20px;
background-color: var(--card-bg);
border-top: 1px solid var(--border-color);
display: flex;
gap: 10px;
align-items: center;
}
/* View-Klassen */
.view-chat-only .chat-article { display: none; }
@@ -215,8 +266,8 @@
display: block;
flex: 0 0 40%; /* WICHTIG: Verhindert, dass das CSS die Breite erzwingt */
/* width: ; Das ist jetzt nur noch der Startwert */
max-width: 80%; /* Verhindert, dass man den Chat ganz wegdrückt */
min-width: 10%; /* Verhindert, dass der Artikel verschwindet */
max-width: 75%; /* Verhindert, dass man den Chat ganz wegdrückt */
min-width: 25%; /* Verhindert, dass der Artikel verschwindet */
}
.view-split .chat-container {
@@ -364,7 +415,7 @@
.chat-main {
/* WICHTIG: Nutzt die volle Höhe abzüglich Header,
aber ohne aus dem Viewport zu ragen */
height: calc(100dvh - 45px); /* dvh = dynamic viewport height */
/* height: calc(100dvh - 45px); dvh = dynamic viewport height */
display: flex;
flex-direction: column;
overflow: hidden;
@@ -386,6 +437,7 @@
}
.view-split .chat-container {
margin-top: 0px;
width: 100% !important;
max-width: none !important;
min-width: 100% !important;
@@ -456,4 +508,9 @@
flex: 1; /* Nutzt den Platz über der Tastatur */
font-size: 16px; /* Wichtig gegen Auto-Zoom */
}
.floating-export-btn {
top: 10px;
right: 15px;
font-size: 0.75rem;
}
}

View File

@@ -61,6 +61,13 @@ async function sendMessage() {
// Editor ausblenden
if (systemContainer) systemContainer.classList.add('locked');
const exportBtn = document.getElementById('export-btn');
if (exportBtn) {
exportBtn.style.setProperty('display', 'block', 'important');
console.log("Export Button sollte jetzt sichtbar sein");
}
isFirstMessage = false;
}
@@ -275,4 +282,42 @@ if (systemInput) {
// Delay, um dem Klick auf den Button Vorrang zu geben
setTimeout(exitEditMode, 200);
});
}
}
// Die Export-Funktion
document.getElementById('export-btn')?.addEventListener('click', () => {
if (messageHistory.length === 0) return;
// Wir erstellen ein Export-Objekt mit Metadaten
const exportData = {
timestamp: new Date().toISOString(),
model: "trinity-test",
history: messageHistory, // Das ist dein Array mit {role, content}
stats: {
messageCount: messageHistory.length,
totalChars: getHistoryVolume()
}
};
// Umwandlung in einen JSON-String (mit 2 Leerzeichen Einrückung für Lesbarkeit)
const jsonString = JSON.stringify(exportData, null, 2);
// Download-Logik
const blob = new Blob([jsonString], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
// Dateiname mit Datum und Uhrzeit
const dateStr = new Date().toISOString().slice(0,19).replace(/:/g, '-');
a.download = `chat-export-${dateStr}.json`;
document.body.appendChild(a);
a.click();
// Aufräumen
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 0);
});

View File

@@ -179,7 +179,7 @@ nav {
display: none;
flex-direction: column;
min-width: 140px;
z-index: 2000;
z-index: 2000 !important;
overflow: hidden;
}