Little fix

app.css

@@ -3,6 +3,10 @@
   --layout-gap: 0 !important;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 #main-row {
   height: 100vh;
   max-height: 1500px;
@@ -12,7 +16,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 1px;
+  padding: 0;
   overflow: hidden;
 }
 
@@ -22,8 +26,57 @@
   border: 0;
 }
 
-.icon-button-wrapper {
-  display: hidden;
+.sidebar {
+  border-right: 1px solid var(--border-color-primary);
+}
+
+.sidebar-parent:has(.sidebar.open:not(.right)) {
+  padding-left: 320px;
+}
+
+.sidebar-content {
+  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-size: 180px 52px;
+}
+
+.toggle-button {
+  top: 10px;
+}
+
+/* New Conversation button - top spacing */
+.sidebar > :first-child {
+  margin-bottom: 8px;
+}
+
+/* Sidebar buttons (New/Del) */
+#main-row .sidebar button {
+  transition: all 0.15s ease;
+}
+
+#main-row .sidebar button:hover {
+  transform: translateY(-1px);
+}
+
+.sidebar-content .form {
+  border: 0;
+  background: transparent;
+}
+
+.wrap {
+  gap: 0;
+}
+
+/* Conversation items — card-style list */
+#conversations-radio {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+#conversations-radio > div:last-child {
+  display: grid;
+  gap: 2px;
 }
 
 #conversations-radio input[type="radio"] {
@@ -33,23 +86,77 @@
   height: 0;
 }
 
-label.selected {
-    background: var(--checkbox-label-background-fill-hover) !important;
+#conversations-radio span[data-testid="block-info"] {
+  display: none;
+}
+
+#conversations-radio label {
+  padding: 10px 14px;
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s ease;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: transparent;
+  color: var(--button-primary-text-color);
+  border-bottom: 1px solid var(--border-color-primary);
 }
 
 label span {
   margin: 0;
 }
 
-#conversations-radio > div:last-child {
-  display: grid;
+.icon-button-wrapper {
+  display: hidden;
+}
+
+/* --- Chat Message Animations --- */
+@keyframes messageSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Animate new messages as they appear */
+#chatbot [data-testid="bot"],
+#chatbot [data-testid="user"],
+#chatbot [class*="message"] {
+  animation: messageSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* --- 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;
   height: 100%;
   min-width: 40px;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+  padding: 0;
 }
+
 #send-btn::after {
   content: "";
   display: inline-block;
@@ -58,6 +165,7 @@ label span {
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") no-repeat center;
   background-size: contain;
 }
+
 #stop-btn::after {
   content: "";
   display: inline-block;
@@ -67,10 +175,34 @@ label span {
   background-size: contain;
 }
 
-.sidebar-parent:has(.sidebar.open:not(.right)) {
-  padding-left: 320px;
+/* --- Custom Scrollbars --- */
+#chatbot::-webkit-scrollbar {
+  width: 6px;
 }
 
-.sidebar {
-  border-right: 1px solid var(--border-color-primary);
-}
+#chatbot::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#chatbot::-webkit-scrollbar-thumb {
+  background: var(--border-color-primary);
+  transition: background 0.2s ease;
+}
+
+#chatbot::-webkit-scrollbar-thumb:hover {
+  background: var(--neutral-400);
+}
+
+/* Sidebar scrollbar — thinner, subtle */
+.sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+  background: var(--border-color-primary);
+  border-radius: 2px;
+}

app.py

@@ -55,7 +55,7 @@ JS_SAVE_STATE = """(stateJson) => {
     }
 
     localStorage.setItem("titles", JSON.stringify(titles));
-    return stateJson;  // pass-through so Gradio output still works
+    return stateJson;
 }"""
 
 
@@ -233,14 +233,6 @@ class GradioEvents:
             gr.update(value=state_value),
         )
 
-    @staticmethod
-    def clear_history(state_value):
-        if not state_value.get("conversation_id"):
-            return gr.skip()
-        state_value["conversation_contexts"][
-            state_value["conversation_id"]]["history"] = []
-        return gr.update(value=[]), gr.update(value=state_value)
-
     @staticmethod
     def cancel_stream(state_value):
         """Mark the current assistant message as cancelled."""
@@ -298,23 +290,17 @@ with gr.Blocks(fill_width=True, title="Demo Chat") as demo:
             )
             conv_choice = gr.Radio(
                 choices=[],
-                label="Conversations",
+                label=None,
                 interactive=True,
                 elem_id="conversations-radio",
             )
             delete_btn = gr.Button(
                 value="Delete Selected",
                 variant="stop",
+                visible=False
             )
 
         with gr.Column(elem_id="chat-column"):
-            with gr.Row():
-                clear_btn = gr.Button(
-                    value="Clear History",
-                    scale=0,
-                    min_width=120,
-                    visible=False,
-                )
 
             chatbot = gr.Chatbot(
                 elem_id="chatbot",
@@ -322,7 +308,7 @@ with gr.Blocks(fill_width=True, title="Demo Chat") as demo:
                 buttons=[],
                 layout="bubble"
             )
-            with gr.Row():
+            with gr.Row(elem_id="input-row"):
                 msg = gr.Textbox(
                     placeholder="Type a message and press Enter...",
                     show_label=False,
@@ -363,12 +349,6 @@ with gr.Blocks(fill_width=True, title="Demo Chat") as demo:
         outputs=[conv_choice, chatbot, state],
     )
 
-    clear_btn.click(
-        fn=GradioEvents.clear_history,
-        inputs=[state],
-        outputs=[chatbot, state],
-    )
-
     submit_event = send_btn.click(
         fn=GradioEvents.stream_response,
         inputs=[msg, state],