From 2199d6007cf65d0b1e98c129d15cca7d7c5ec3b6 Mon Sep 17 00:00:00 2001
From: marwin <medczinski.marw@gmail.com>
Date: Fri, 2 May 2025 09:14:01 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20verbessere=20das=20Layout?=
 =?UTF-8?q?=20und=20die=20Benutzeroberfl=C3=A4che=20des=20Chatbereichs=20i?=
 =?UTF-8?q?n=20index.html=20mit=20neuen=20Stilen=20und=20verbesserten=20Ei?=
 =?UTF-8?q?ngabefeldern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/index.html | 157 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 135 insertions(+), 22 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 7309232..4d2a0c9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -100,16 +100,20 @@
   
   /* Chat section styles */
   .embedded-chat {
-    height: 350px;
+    height: 500px;
     border-radius: 1rem;
     overflow: hidden;
     transition: all 0.3s ease;
     border: 1px solid;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.05);
   }
   
   .dark .embedded-chat {
     background-color: rgba(17, 24, 39, 0.7);
     border-color: rgba(109, 40, 217, 0.2);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 5px 10px -5px rgba(0, 0, 0, 0.2);
   }
   
   .embedded-chat {
@@ -118,9 +122,118 @@
   }
   
   #embedded-chat-messages {
-    height: 250px;
+    flex: 1;
     overflow-y: auto;
+    padding: 1.25rem;
+    min-height: 320px;
+  }
+  
+  .chat-input-container {
+    padding: 1.25rem;
+    border-top: 1px solid;
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  
+  .dark .chat-input-container {
+    background-color: rgba(17, 24, 39, 0.6);
+    border-color: rgba(75, 85, 99, 0.4);
+  }
+  
+  .mystical-input {
+    background-color: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(209, 213, 219, 0.5);
+    color: #4B5563;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    outline: none;
+    transition: all 0.3s ease;
+    width: 100%;
+    font-size: 1rem;
+  }
+  
+  .dark .mystical-input {
+    background-color: rgba(31, 41, 55, 0.7);
+    border-color: rgba(75, 85, 99, 0.4);
+    color: #E5E7EB;
+  }
+  
+  .mystical-input:focus {
+    border-color: rgba(139, 92, 246, 0.5);
+    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
+  }
+  
+  .dark .mystical-input:focus {
+    border-color: rgba(139, 92, 246, 0.5);
+    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
+  }
+  
+  /* Verbesserte Lesbarkeit für Chat-Nachrichten */
+  .chat-message {
+    margin-bottom: 1.25rem;
+  }
+  
+  .chat-bubble {
     padding: 1rem;
+    border-radius: 0.75rem;
+    max-width: 85%;
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+  
+  .assistant-bubble {
+    background-color: rgba(243, 244, 246, 0.95);
+    color: #374151;
+  }
+  
+  .dark .assistant-bubble {
+    background-color: rgba(31, 41, 55, 0.95);
+    color: #E5E7EB;
+  }
+  
+  .user-bubble {
+    background-color: rgba(139, 92, 246, 0.15);
+    color: #4B5563;
+  }
+  
+  .dark .user-bubble {
+    background-color: rgba(124, 58, 237, 0.3);
+    color: #E5E7EB;
+  }
+  
+  /* Beispiel-Buttons verbessert */
+  .quick-query-container {
+    margin-top: 0.75rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  
+  .quick-query-btn {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.75rem;
+    border-radius: 2rem;
+    background-color: rgba(243, 244, 246, 0.8);
+    color: #4B5563;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    border: 1px solid rgba(209, 213, 219, 0.5);
+  }
+  
+  .dark .quick-query-btn {
+    background-color: rgba(55, 65, 81, 0.8);
+    color: #E5E7EB;
+    border-color: rgba(75, 85, 99, 0.4);
+  }
+  
+  .quick-query-btn:hover {
+    background-color: rgba(229, 231, 235, 0.9);
+    transform: translateY(-1px);
+  }
+  
+  .dark .quick-query-btn:hover {
+    background-color: rgba(75, 85, 99, 0.9);
   }
   
   /* Chat typing indicator */
@@ -299,14 +412,14 @@
         </div>
         
         <!-- Chat Messages -->
-        <div id="embedded-chat-messages" class="border-b border-gray-200 dark:border-gray-700">
+        <div id="embedded-chat-messages" class="border-b-0">
           <!-- Assistant Message -->
-          <div class="mb-4 flex">
-            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
+          <div class="chat-message flex">
+            <div class="w-9 h-9 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
               <i class="fa-solid fa-robot text-sm"></i>
             </div>
-            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
-              <div class="text-gray-700 dark:text-gray-300 markdown-content">
+            <div class="chat-bubble assistant-bubble">
+              <div class="markdown-content">
                 <p>Hallo! Ich bin dein Systades-Assistent. Wie kann ich dir heute helfen?</p>
                 <p>Du kannst mir Fragen zu:</p>
                 <ul>
@@ -320,24 +433,24 @@
           </div>
           
           <!-- User Message -->
-          <div class="mb-4 flex justify-end">
-            <div class="bg-purple-100 dark:bg-purple-900/30 rounded-lg p-3 max-w-[80%]">
-              <p class="text-gray-800 dark:text-gray-200">
+          <div class="chat-message flex justify-end">
+            <div class="chat-bubble user-bubble">
+              <p>
                 Kann ich mit deiner Hilfe eine Mindmap zum Thema Künstliche Intelligenz erstellen?
               </p>
             </div>
-            <div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 ml-2 flex-shrink-0">
+            <div class="w-9 h-9 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 ml-3 flex-shrink-0">
               <i class="fa-solid fa-user text-sm"></i>
             </div>
           </div>
           
           <!-- Assistant Response -->
-          <div class="mb-4 flex" id="demo-ai-response">
-            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
+          <div class="chat-message flex" id="demo-ai-response">
+            <div class="w-9 h-9 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
               <i class="fa-solid fa-robot text-sm"></i>
             </div>
-            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
-              <div class="text-gray-700 dark:text-gray-300 markdown-content">
+            <div class="chat-bubble assistant-bubble">
+              <div class="markdown-content">
                 <p>Ja, natürlich! Ich kann dir dabei helfen, eine Mindmap zum Thema <strong>Künstliche Intelligenz</strong> zu erstellen.</p>
                 <p>Du kannst wie folgt vorgehen:</p>
                 <ol>
@@ -353,19 +466,19 @@
         </div>
         
         <!-- Chat Input -->
-        <div class="p-4">
+        <div class="chat-input-container">
           <div class="flex">
             <input type="text" placeholder="Stelle eine Frage..." class="mystical-input flex-grow" disabled>
-            <button class="ml-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-2 rounded-lg disabled:opacity-50" disabled>
+            <button class="ml-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-3 py-2 rounded-lg disabled:opacity-50 flex-shrink-0 hover:shadow-md transition-all duration-200" disabled>
               <i class="fa-solid fa-paper-plane"></i>
             </button>
           </div>
           <!-- Quick Queries -->
-          <div class="mt-3 flex flex-wrap gap-2">
-            <span class="text-xs text-gray-500 dark:text-gray-400 mr-1">Beispiele:</span>
-            <button data-question="Was sind die wichtigsten Grundlagen der Künstlichen Intelligenz?" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">KI-Grundlagen</button>
-            <button data-question="Wie kann ich eine Mindmap zum Thema Neuronale Netzwerke erstellen?" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Mindmap erstellen</button>
-            <button data-question="Zeige mir alle verfügbaren Kategorien in der Datenbank" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Datenbank durchsuchen</button>
+          <div class="quick-query-container">
+            <span class="text-sm text-gray-500 dark:text-gray-400 mr-1">Beispiele:</span>
+            <button data-question="Was sind die wichtigsten Grundlagen der Künstlichen Intelligenz?" class="quick-query-btn hover:shadow-sm">KI-Grundlagen</button>
+            <button data-question="Wie kann ich eine Mindmap zum Thema Neuronale Netzwerke erstellen?" class="quick-query-btn hover:shadow-sm">Mindmap erstellen</button>
+            <button data-question="Zeige mir alle verfügbaren Kategorien in der Datenbank" class="quick-query-btn hover:shadow-sm">Datenbank durchsuchen</button>
           </div>
         </div>
       </div>