Update app.py

app.py

@@ -27,11 +27,38 @@ Keep a simple, approachable, and friendly tone otherwise."""
 fade_js = """
 <script>
 document.addEventListener("DOMContentLoaded", () => {
+    // Add startup message
+    setTimeout(() => {
+        const chatContainer = document.querySelector(".chat-interface");
+        if (chatContainer && chatContainer.children.length === 0) {
+            const startupMsg = document.createElement("div");
+            startupMsg.className = "startup-message";
+            startupMsg.innerHTML = '<div class="startup-content"><div class="startup-icon">🤖</div><div class="startup-text"><div class="startup-title">BitAI</div><div class="startup-subtitle">How was your day? Good morning!</div><div class="startup-note">Entirely made by AI</div></div></div>';
+            chatContainer.appendChild(startupMsg);
+            
+            // Animate in
+            setTimeout(() => {
+                startupMsg.style.opacity = "1";
+                startupMsg.style.transform = "translateY(0)";
+            }, 100);
+        }
+    }, 500);
+
     // Observer for chat messages
     const observer = new MutationObserver(mutations => {
         mutations.forEach(m => {
             m.addedNodes.forEach(node => {
                 if (node.classList && node.classList.contains('chat-message')) {
+                    // Remove startup message when first real message appears
+                    const startupMsg = document.querySelector(".startup-message");
+                    if (startupMsg) {
+                        startupMsg.style.opacity = "0";
+                        startupMsg.style.transform = "translateY(20px)";
+                        setTimeout(() => {
+                            startupMsg.remove();
+                        }, 300);
+                    }
+                    
                     // Enhanced message animation
                     node.style.opacity = 0;
                     node.style.transform = 'translateY(20px) scale(0.95)';
@@ -57,23 +84,6 @@ document.addEventListener("DOMContentLoaded", () => {
     // Enhanced typing animation for textarea
     const txt = document.querySelector("textarea");
     if (txt) {
-        // Add smooth text appearance
-        txt.addEventListener("input", function() {
-            // Store current cursor position
-            const cursorPosition = this.selectionStart;
-            
-            // Add smooth text effect
-            this.style.transition = "all 0.2s ease";
-            this.style.backgroundColor = "#222";
-            
-            setTimeout(() => {
-                this.style.backgroundColor = "#1a1a1a";
-                
-                // Restore cursor position
-                this.setSelectionRange(cursorPosition, cursorPosition);
-            }, 200);
-        });
-        
         txt.addEventListener("focus", () => {
             txt.style.transition = "all 0.3s ease";
             txt.style.transform = "translateY(-2px)";
@@ -190,36 +200,6 @@ document.addEventListener("DOMContentLoaded", () => {
             }, 50);
         }, 3000);
     }
-    
-    // Add smooth text appearance effect
-    const addSmoothTextEffect = () => {
-        const textareas = document.querySelectorAll("textarea");
-        textareas.forEach(textarea => {
-            if (textarea.hasAttribute("data-smooth-added")) return;
-            
-            textarea.setAttribute("data-smooth-added", "true");
-            
-            textarea.addEventListener("input", function() {
-                // Add smooth transition for text color
-                this.style.transition = "color 0.2s ease";
-                
-                // Briefly change color for smooth appearance
-                const originalColor = this.style.color;
-                this.style.color = "#aaa";
-                
-                setTimeout(() => {
-                    this.style.color = originalColor || "#fff";
-                }, 50);
-            });
-        });
-    };
-    
-    // Add smooth text effect
-    addSmoothTextEffect();
-    
-    // Observe for new textareas
-    const textareaObserver = new MutationObserver(addSmoothTextEffect);
-    textareaObserver.observe(document.body, { childList: true, subtree: true });
 });
 </script>
 """
@@ -264,6 +244,47 @@ body {
     border-bottom-left-radius: 5px; 
     margin-right: 40px;
 }
+/* Startup message */
+.startup-message {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+    margin: 20px 0;
+    display: flex;
+    justify-content: center;
+}
+.startup-content {
+    display: flex;
+    align-items: center;
+    background: linear-gradient(145deg, #2e2e2e, #252525);
+    padding: 20px;
+    border-radius: 20px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    max-width: 80%;
+}
+.startup-icon {
+    font-size: 32px;
+    margin-right: 15px;
+}
+.startup-text {
+    text-align: left;
+}
+.startup-title {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 5px;
+    color: #fff;
+}
+.startup-subtitle {
+    font-size: 16px;
+    margin-bottom: 3px;
+    color: #eee;
+}
+.startup-note {
+    font-size: 12px;
+    color: #aaa;
+    font-style: italic;
+}
 textarea { 
     border: none; 
     outline: none; 
@@ -278,7 +299,7 @@ textarea {
     min-height: 56px; /* Prevent resizing */
     box-sizing: border-box; 
     resize: none; 
-    transition: all 0.3s ease, color 0.2s ease;
+    transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     width: 100%;
 }
@@ -327,6 +348,7 @@ textarea {
     background: #1a1a1a;
     padding: 15px;
     box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
+    min-height: 400px;
 }
 .gr-box { 
     border-radius: 15px; 
@@ -361,20 +383,6 @@ textarea {
 .bounce {
     animation: bounce 0.8s;
 }
-/* Smooth text animation */
-@keyframes textAppear {
-    from {
-        opacity: 0.5;
-        transform: translateY(2px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-.smooth-text {
-    animation: textAppear 0.2s ease;
-}
 /* Scrollbar styling */
 ::-webkit-scrollbar {
     width: 8px;