New Input Approach

app.py

@@ -3,7 +3,7 @@ import threading
 from markdown_it import MarkdownIt
 from mdit_py_plugins import front_matter
 
-from reactpy import component, html, hooks, use_callback, svg
+from reactpy import component, html, hooks, use_effect, svg
 from reactpy.backend.starlette import configure
 from starlette.applications import Starlette
 from vectara_agentic.agent import AgentStatusType
@@ -33,6 +33,7 @@ def App():
     messages, set_messages = hooks.use_state([])
 
     message, set_message = hooks.use_state("")
+    input_value, set_input_value = hooks.use_state("")
 
     def use_agent_logger():
         agent_log_entries, set_agent_log_entries = hooks.use_state([])
@@ -92,6 +93,7 @@ def App():
         if message.strip():
             sent_message = message
             set_message("")
+            set_input_value("")
             set_show_logs_button(False)
             set_show_logs(False)
             reset_log_entries()
@@ -110,18 +112,24 @@ def App():
 
             asyncio.create_task(send_message_async(sent_message))
 
-    # New Code Suggestion from Claude
+    # # New Code Suggestion from Claude
+    # def handle_input(event):
+    #     set_message(event['target']['value'])
+
+    # def handle_key_down(event):
+    #     if event['key'] == 'Enter':
+    #         send_message()
+
+    
     def handle_input(event):
-        set_message(event['target']['value'])
+        new_value = event['target']['value']
+        set_input_value(new_value)
 
     def handle_key_down(event):
         if event['key'] == 'Enter':
             send_message()
 
-    # # ORIGINAL CODE FROM CLAUDE
-    # handle_key_down = use_callback(lambda event:
-    #     send_message() if event['key'] == 'Enter' else None,
-    # [send_message])
+    use_effect(lambda: set_message(input_value), [input_value])
 
     @component
     def Header(demo_name: str, short_description: str, extra_info: str):