fix some chat sizing and placing
This commit is contained in:
103
static/chat.css
103
static/chat.css
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
@@ -179,7 +179,7 @@ nav {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
min-width: 140px;
|
||||
z-index: 2000;
|
||||
z-index: 2000 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user