Better Hoem Page

app.css

@@ -3,6 +3,8 @@
   --layout-gap: 0 !important;
 }
 
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+
 html {
   scroll-behavior: smooth;
 }
@@ -18,6 +20,7 @@ html {
   flex-direction: column;
   padding: 0;
   overflow: hidden;
+  position: relative;
 }
 
 #chatbot {
@@ -135,18 +138,6 @@ label span {
 /* --- Input Area — Docked Bottom --- */
 
 
-/* Style the textbox wrapper to look like ChatGPT's input container */
-#input-row .form {
-  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
-  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
-  border: 1px solid var(--border-color-primary) !important;
-}
-
-#input-row .form:focus-within {
-  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
-  border-color: var(--neutral-400) !important;
-}
-
 /* --- Send / Stop Button Micro-animations --- */
 #send-btn, #stop-btn {
   font-size: 0;
@@ -206,3 +197,148 @@ label span {
   background: var(--border-color-primary);
   border-radius: 2px;
 }
+
+.input-container textarea {
+  background: transparent !important;
+}
+
+/* ============================================
+   LANDING PAGE - Terminal-inspired Design
+   ============================================ */
+
+#landing-page-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--background-fill-primary);
+  z-index: 10;
+  pointer-events: auto;
+}
+
+#landing-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.landing-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  padding: 40px;
+  max-width: 600px;
+  width: 100%;
+}
+
+/* Logo styling */
+.landing-logo {
+  margin-bottom: 100px !important;
+}
+
+.landing-logo svg {
+  height: 60px;
+  width: auto;
+  filter: drop-shadow(0 0 20px rgba(241, 236, 236, 0.1));
+}
+
+/* Hide landing page when chat has messages */
+#landing-page-container.hidden {
+  display: none !important;
+}
+
+/* ============================================
+   INPUT ROW - Terminal-style Global
+   ============================================ */
+
+/* When landing page is visible, center the input row */
+#chat-column.landing-active #input-row {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 600px;
+  z-index: 20;
+}
+
+/* When landing page is hidden (chat active), keep input at bottom */
+#chat-column:not(.landing-active) #input-row {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  transform: none;
+  max-width: none;
+}
+
+/* Terminal-style input row */
+#input-row {
+  z-index: 15;
+  position: relative;
+}
+
+#input-row .form {
+  background: rgba(255, 255, 255, 0.03) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 8px !important;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace !important;
+  transition: all 0.2s ease !important;
+}
+
+#input-row .form:focus-within {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+  background: rgba(255, 255, 255, 0.05) !important;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05) !important;
+}
+
+/* Terminal cursor effect on input */
+#input-row textarea,
+#input-row input[type="text"] {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace !important;
+  caret-color: var(--body-text-color) !important;
+  caret-shape: block !important;
+}
+
+/* Blinking cursor animation for input */
+@keyframes inputCursorBlink {
+  0%, 50% { border-right-color: var(--body-text-color); }
+  51%, 100% { border-right-color: transparent; }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .landing-content {
+    padding: 20px;
+    gap: 24px;
+  }
+
+  .landing-logo svg {
+    height: 40px;
+  }
+}
+
+/* Apply monospace font to body for terminal feel */
+body, .gradio-container {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace !important;
+}
+
+/* Chatbot styling when empty */
+#chatbot:empty,
+#chatbot .empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+/* Ensure proper z-index stacking */
+#chatbot {
+  z-index: 5;
+}

app.py

@@ -185,7 +185,6 @@ class GradioEvents:
                 send_btn: gr.update(visible=True),
                 stop_btn: gr.update(visible=False),
             }
-            raise
 
     @staticmethod
     def new_chat(state_value):
@@ -302,6 +301,23 @@ with gr.Blocks(fill_width=True, title="Demo Chat") as demo:
 
         with gr.Column(elem_id="chat-column"):
 
+            # Landing page shown when chat is empty
+            landing_page = gr.HTML(
+                value="""
+                <div id="landing-page">
+                    <div class="landing-content">
+                        <div class="landing-logo">
+                            <svg width="300" height="42" viewBox="0 0 300 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M0 6H24V12H0V6ZM0 12H6V18H0V12ZM18 12H24V18H18V12ZM30 6H54V12H30V6ZM30 12H36V18H30V12ZM30 36H36V42H30V36ZM48 12H54V18H48V12ZM60 6H84V12H60V6ZM60 12H66V18H60V12ZM78 12H84V18H78V12ZM90 6H114V12H90V6ZM90 12H96V18H90V12ZM108 12H114V18H108V12ZM120 6H150V12H120V6ZM120 12H126V18H120V12ZM132 12H138V18H132V12ZM144 12H150V18H144V12ZM156 6H162V18H156V6ZM174 6H180V18H174V6ZM174 36H180V42H174V36ZM186 6H210V12H186V6ZM192 0H198V6H192V0ZM192 12H198V18H192V12ZM216 0H222V12H216V0ZM216 12H240V18H216V12ZM246 6H270V12H246V6ZM246 12H252V18H246V12ZM264 12H270V18H264V12ZM276 6H300V12H276V6ZM276 12H282V18H276V12Z" fill="#F1ECEC"/>
+                                <path d="M0 18H6V30H0V18ZM0 30H24V36H0V30ZM18 18H24V30H18V18ZM30 18H36V30H30V18ZM30 30H54V36H30V30ZM48 18H54V30H48V18ZM60 18H84V24H60V18ZM60 24H66V30H60V24ZM60 30H84V36H60V30ZM90 18H96V36H90V18ZM108 18H114V36H108V18ZM120 18H126V36H120V18ZM132 18H138V24H132V18ZM144 18H150V36H144V18ZM156 18H162V24H156V18ZM156 24H180V30H156V24ZM174 18H180V24H174V18ZM174 30H180V36H174V30ZM192 18H198V30H192V18ZM192 30H204V36H192V30ZM216 18H222V36H216V18ZM234 18H240V36H234V18ZM246 18H252V30H246V18ZM246 30H270V36H246V30ZM264 18H270V30H264V18ZM276 18H300V24H276V18ZM276 30H300V36H276V30ZM294 24H300V30H294V24Z" fill="#B7B1B1"/>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                """,
+                elem_id="landing-page-container",
+            )
+
             chatbot = gr.Chatbot(
                 elem_id="chatbot",
                 show_label=False,
@@ -310,10 +326,11 @@ with gr.Blocks(fill_width=True, title="Demo Chat") as demo:
             )
             with gr.Row(elem_id="input-row"):
                 msg = gr.Textbox(
-                    placeholder="Type a message and press Enter...",
+                    placeholder="Enter your message here...",
                     show_label=False,
                     scale=4,
                     container=False,
+                    max_lines=10,
                 )
                 send_btn = gr.Button(
                     "Send",
@@ -387,6 +404,86 @@ with gr.Blocks(fill_width=True, title="Demo Chat") as demo:
         fn=GradioEvents.load_from_js,
         inputs=[js_load_output, state],
         outputs=[conv_choice, state],
+    ).then(
+        fn=None,
+        inputs=None,
+        outputs=None,
+        js="""
+        () => {
+            // Landing page toggle logic
+            const landingPage = document.getElementById('landing-page-container');
+            const chatbot = document.getElementById('chatbot');
+            const msgInput = document.querySelector('#input-row textarea, #input-row input[type="text"]');
+
+            if (!landingPage || !chatbot) return;
+
+            function toggleLanding() {
+                // Check if chatbot has any messages
+                const messages = chatbot.querySelectorAll('[data-testid="bot"], [data-testid="user"], [class*="message"]');
+                const hasMessages = messages.length > 0;
+
+                // Also check for empty state indicators
+                const emptyState = chatbot.querySelector('.empty-state, .placeholder, [class*="empty"]');
+                const chatColumn = document.getElementById('chat-column');
+
+                if (hasMessages && !emptyState) {
+                    landingPage.classList.add('hidden');
+                    if (chatColumn) chatColumn.classList.remove('landing-active');
+                } else {
+                    landingPage.classList.remove('hidden');
+                    if (chatColumn) chatColumn.classList.add('landing-active');
+                }
+            }
+
+            // Initial check
+            toggleLanding();
+
+            // Set up mutation observer to watch for chat changes
+            const observer = new MutationObserver((mutations) => {
+                let shouldToggle = false;
+                for (const mutation of mutations) {
+                    if (mutation.type === 'childList' || mutation.type === 'subtree') {
+                        shouldToggle = true;
+                        break;
+                    }
+                }
+                if (shouldToggle) {
+                    // Debounce the toggle check
+                    clearTimeout(window._landingToggleTimeout);
+                    window._landingToggleTimeout = setTimeout(toggleLanding, 100);
+                }
+            });
+
+            observer.observe(chatbot, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['class']
+            });
+
+            // Also watch for the input area to handle new chat creation
+            const inputRow = document.getElementById('input-row');
+            if (inputRow) {
+                observer.observe(inputRow, {
+                    childList: true,
+                    subtree: true
+                });
+            }
+
+            // Click on landing prompt to focus input
+            const landingPrompt = document.querySelector('.landing-prompt');
+            if (landingPrompt && msgInput) {
+                landingPrompt.addEventListener('click', () => {
+                    msgInput.focus();
+                    msgInput.click();
+                });
+            }
+
+            // Store reference for cleanup
+            window._landingPageObserver = observer;
+            window._landingPage = landingPage;
+        }
+        """,
     )
 
 theme = gr.themes.Base(radius_size="none")