fix some chat sizing and placing

layouts/_default/chat.html

@@ -66,7 +66,7 @@
         <div class="resizer" id="dragMe"></div>
 
         <div class="chat-container">
-            
+            <button id="export-btn" class="floating-export-btn" title="Chat exportieren">📥 Export</button>
             <div id="chat-messages">
                 <div id="system-prompt-container" class="message system-config">
                     <strong>⚙️ System-Promt</strong>

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 */
+    max-width: 75%;   /* Verhindert, dass man den Chat ganz wegdrückt */
-    min-width: 10%;   /* Verhindert, dass der Artikel verschwindet */
+    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;
+    }
 }

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;
     }
 
@@ -276,3 +283,41 @@ if (systemInput) {
         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);
+});

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;
 }