⚙️ System-Promt
diff --git a/static/chat.css b/static/chat.css
index e27008e..e91fec0 100644
--- a/static/chat.css
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/static/chat.js b/static/chat.js
index 0959a73..6da98bd 100644
--- a/static/chat.js
+++ b/static/chat.js
@@ -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);
});
-}
\ No newline at end of file
+}
+
+// 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);
+});
diff --git a/static/common.css b/static/common.css
index eed8578..447eb6c 100644
--- a/static/common.css
+++ b/static/common.css
@@ -179,7 +179,7 @@ nav {
display: none;
flex-direction: column;
min-width: 140px;
- z-index: 2000;
+ z-index: 2000 !important;
overflow: hidden;
}