merged changes with solin's code

app.py

@@ -449,7 +449,18 @@ def update_styles(theme, font_size):
     """
     return style
 
-# Gradio build stuff actually starts here
+def load_chat_history(chat_history):
+    if chat_history is None:
+        return []
+    return [
+        (
+            msg["content"] if msg["role"] == "user" else None,
+            msg["content"] if msg["role"] == "assistant" else None
+        )
+        for msg in chat_history
+    ]
+
+# Gradio stuff
 with gr.Blocks(css=None) as demo:
     dynamic_styles = gr.HTML(value=update_styles("Dark", "Medium"))
     
@@ -457,7 +468,7 @@ with gr.Blocks(css=None) as demo:
         with gr.TabItem("💬 Chatbot"):
             gr.HTML('<div id="header_section"></div>')
             header_desc = gr.HTML('<p id="header_description">' + translations["English"]["header_description"] + '</p>')
-            chatbot = gr.Chatbot(label="", height=500, show_label=False, elem_id="chatbot")
+            chatbot = gr.Chatbot(label="", height=500, show_label=False, elem_id="chatbot", show_copy_button=False, show_copy_all_button=False, show_share_button=False)
             
             with gr.Row():
                 user_input = gr.Textbox(
@@ -466,17 +477,20 @@ with gr.Blocks(css=None) as demo:
                     placeholder=translations["English"]["user_input_placeholder"],
                     interactive=True,
                     elem_id="user_input",
-                    scale=15
+                    scale=12
                 )
                 send_button = gr.Button(
                     value=translations["English"]["send_button"],
                     elem_id="send_button",
-                    scale=1
+                    scale=2
                 )
-            conversation_state = gr.State(value=[])
+                clear_button = gr.Button("🗑️ Clear", elem_id="send_button", scale=2)
 
+            conversation_state = gr.BrowserState([])
+            demo.load(load_chat_history, inputs=[conversation_state], outputs=[chatbot])
+            
             gr.HTML("<br>")
-            gr.HTML("<h3 style='text-align: center; color: {text_color};'>Need inspiration? Try asking about one of these topics:</h3>")
+            gr.HTML("<h3 style='text-align: center;'>Need inspiration? Try asking about one of these topics:</h3>")
 
             example_questions = gr.Radio(
                 choices=[
@@ -493,9 +507,19 @@ with gr.Blocks(css=None) as demo:
             )
 
             example_questions.change(
-                fn=lambda x: chat_with_bot_stream(x, conversation_state.value),
+                fn=lambda x: chat_with_bot_stream(x, conversation_state.value[:1]), 
                 inputs=example_questions,
+                outputs=[chatbot, conversation_state] 
+            )
+
+            user_input.submit(
+                fn=chat_with_bot_stream,
+                inputs=[user_input, conversation_state],
                 outputs=[chatbot, conversation_state]
+            ).then(
+                fn=lambda: "",
+                inputs=None,
+                outputs=user_input
             )
 
             send_button.click(
@@ -507,6 +531,12 @@ with gr.Blocks(css=None) as demo:
                 inputs=None,
                 outputs=user_input
             )
+
+            clear_button.click(
+                fn=lambda: ([], []),
+                inputs=None,
+                outputs=[chatbot, conversation_state]
+            )
         
         # SETTINGS PAGE
         with gr.TabItem(translations["English"]["settings_tab_item"]):
@@ -547,4 +577,4 @@ with gr.Blocks(css=None) as demo:
                     ]
                 )
 
-demo.launch()
+demo.launch()