Enhancement

app.css

@@ -1,10 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+
 .gradio-container, .main {
   padding: 0 !important;
   --layout-gap: 0 !important;
 }
 
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
-
 html {
   scroll-behavior: smooth;
 }
@@ -31,6 +31,7 @@ html {
 
 .sidebar {
   border-right: 1px solid var(--border-color-primary);
+  box-shadow: none;
 }
 
 .sidebar-parent:has(.sidebar.open:not(.right)) {
@@ -38,9 +39,20 @@ html {
 }
 
 .sidebar-content {
+  position: relative;
   padding: 50px 0 0 0 !important;
-  background: url("data:image/svg+xml,%3Csvg width='300' height='42' viewBox='0 0 300 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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='%23F1ECEC'/%3E%3Cpath 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='%23B7B1B1'/%3E%3C/svg%3E") no-repeat top;
+  background: none;
+}
+
+.sidebar-content::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: url("data:image/svg+xml,%3Csvg width='300' height='42' viewBox='0 0 300 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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='%23F1ECEC'/%3E%3Cpath 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='%23B7B1B1'/%3E%3C/svg%3E")
+    no-repeat top;
   background-size: 180px 52px;
+  pointer-events: none;
+  z-index: 0;
 }
 
 .toggle-button {
@@ -104,7 +116,7 @@ html {
   text-overflow: ellipsis;
   white-space: nowrap;
   background: transparent;
-  color: var(--button-primary-text-color);
+  color: var(--button-secondary-text-color);
   border-bottom: 1px solid var(--border-color-primary);
 }
 
@@ -246,7 +258,6 @@ label span {
 .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 */
@@ -254,6 +265,16 @@ label span {
   display: none !important;
 }
 
+.landing-prompt {
+  bottom: 5%;
+  position: absolute;
+  text-align: center;
+}
+
+body:not(.dark) .landing-logo svg, body:not(.dark) .sidebar-content::before {
+  filter: invert(0.8);
+}
+
 /* ============================================
    INPUT ROW - Terminal-style Global
    ============================================ */
@@ -269,6 +290,14 @@ label span {
   z-index: 20;
 }
 
+#chat-column.landing-active #send-btn,
+#chat-column.landing-active #stop-btn {
+  align-self: stretch;
+  min-width: 56px;
+  padding: 0 8px;
+  height: auto;
+}
+
 /* When landing page is hidden (chat active), keep input at bottom */
 #chat-column:not(.landing-active) #input-row {
   position: relative;

app.py

@@ -18,14 +18,21 @@ JS_LOAD_STATE = """(_) => {
     const conversations = [];
     const conversation_contexts = {};
 
-    for (const [id, label] of Object.entries(titles)) {
+    for (const [id, data] of Object.entries(titles)) {
         const raw = localStorage.getItem("chat_id_" + id);
         if (raw) {
-            conversations.push({ key: id, label: label });
+            const label = typeof data === 'string' ? data : data.label;
+            const last_updated = typeof data === 'string' ? 0 : (data.last_updated || 0);
+            conversations.push({ key: id, label: label, last_updated: last_updated });
             conversation_contexts[id] = JSON.parse(raw);
         }
     }
 
+    // Sort newest first
+    conversations.sort((a, b) => (b.last_updated || 0) - (a.last_updated || 0));
+
+    console.log("Loaded conversations from localStorage:", conversations);
+
     return JSON.stringify({ conversations, conversation_contexts });
 }"""
 
@@ -34,7 +41,7 @@ JS_SAVE_STATE = """(stateJson) => {
     const titles = {};
 
     for (const conv of (state.conversations || [])) {
-        titles[conv.key] = conv.label;
+        titles[conv.key] = { label: conv.label, last_updated: conv.last_updated || 0 };
         const ctx = (state.conversation_contexts || {})[conv.key];
         if (ctx !== undefined) {
             localStorage.setItem("chat_id_" + conv.key, JSON.stringify(ctx));
@@ -58,10 +65,87 @@ JS_SAVE_STATE = """(stateJson) => {
     return stateJson;
 }"""
 
+LANDING_PAGE_SCRIPT = """() => {
+    // 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;
+}
+"""
+
 
 def _conv_choices(state_value):
+    convs = sorted(state_value["conversations"], key=lambda c: c.get("last_updated", 0), reverse=True)
     return gr.update(
-        choices=[(c["label"], c["key"]) for c in state_value["conversations"]],
+        choices=[(c["label"], c["key"]) for c in convs],
         value=state_value.get("conversation_id") or None,
     )
 
@@ -80,7 +164,7 @@ class GradioEvents:
             conv_id = str(uuid.uuid4())
             state_value["conversation_id"] = conv_id
             state_value["conversations"].append(
-                {"label": message[:30], "key": conv_id})
+                {"label": message[:30], "key": conv_id, "last_updated": int(time.time() * 1000)})
             state_value["conversation_contexts"][conv_id] = {
                 "history": []
             }
@@ -88,6 +172,11 @@ class GradioEvents:
             conv_id = state_value["conversation_id"]
             state_value["conversation_contexts"].setdefault(
                 conv_id, {"history": []})
+            # Update last_updated for existing conversation
+            for c in state_value["conversations"]:
+                if c["key"] == conv_id:
+                    c["last_updated"] = int(time.time() * 1000)
+                    break
 
         ctx = state_value["conversation_contexts"][conv_id]
 
@@ -269,8 +358,6 @@ class GradioEvents:
             "conversation_contexts": state_value.get("conversation_contexts", {}),
         })
 
-css = open("./app.css", "r").read()
-
 with gr.Blocks(fill_width=True, title="Demo Chat") as demo:
     state = gr.State({
         "conversation_contexts": {},
@@ -313,6 +400,9 @@ with gr.Blocks(fill_width=True, title="Demo Chat") as demo:
                             </svg>
                         </div>
                     </div>
+                    <div class="landing-prompt">
+                        <p>Made with ❤️ by KingNish and Himanshu</p>
+                    </div>
                 </div>
                 """,
                 elem_id="landing-page-container",
@@ -396,6 +486,11 @@ with gr.Blocks(fill_width=True, title="Demo Chat") as demo:
     )
 
     demo.load(
+        fn=lambda: None,
+        inputs=None,
+        outputs=None,
+        js=LANDING_PAGE_SCRIPT,
+    ).then(
         fn=lambda x: x,
         inputs=[js_load_output],
         outputs=[js_load_output],
@@ -404,89 +499,9 @@ 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")
 
 if __name__ == "__main__":
-    demo.queue(default_concurrency_limit=100, max_size=100).launch(ssr_mode=False, max_threads=100, css=css, theme=theme)
+    demo.queue(default_concurrency_limit=100, max_size=100).launch(ssr_mode=False, max_threads=100, css_paths="app.css", theme=theme)