Add refs for rerendering components

app.py

@@ -31,7 +31,6 @@ def App():
             set_agent_log_entries([])
 
         def add_log_entry(new_log_entry):
-            print(f"ADDING LOG ENTRY {new_log_entry}")
             set_agent_log_entries(lambda previous_entries: previous_entries + [new_log_entry])
 
         return agent_log_entries, add_log_entry, reset_log_entries

chatbox.py

@@ -2,15 +2,34 @@ from reactpy import component, html, svg
 from reactpy.core.hooks import use_ref
 
 @component
-# def ChatBox(message, set_message, handle_input_change, handle_key_down, send_message, collapsed):
 def ChatBox(message, set_message, send_message, collapsed):
-    
+    # Store the static SVG button in a ref so it doesn't re-render unnecessarily
+    send_button_ref = use_ref(None)
     def handle_input_change(event):
+        # Update the message state when input changes
         set_message(event['target']['value'])
-
     def handle_key_down(event):
+        # Check for Enter key and send message if the message is not empty
         if event['key'] == 'Enter' and message.strip():
             send_message()
+    # Only define the static button SVG once
+    if send_button_ref.current is None:
+        send_button_ref.current = svg.svg(
+                {
+                    "xmlns": "http://www.w3.org/2000/svg",
+                    "width": "20",
+                    "height": "20",
+                    "fill": "none",
+                    "stroke": "currentColor",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    "viewBox": "0 0 24 24",
+                    "class": "feather feather-send",
+                },
+                svg.path({"d": "M22 2 11 13"}),
+                svg.path({"d": "M22 2 15 22 11 13 2 9z"})
+            )
 
     return html.div(
         {
@@ -51,7 +70,7 @@ def ChatBox(message, set_message, send_message, collapsed):
                     "position": "absolute",
                     "right": "8px",
                     "top": "50%",
-                    "transform":"translateY(-50%)",
+                    "transform": "translateY(-50%)",
                     "background": "none",
                     "border": "none",
                     "cursor": "pointer",
@@ -61,21 +80,89 @@ def ChatBox(message, set_message, send_message, collapsed):
                     "justifyContent": "center",
                 }
             },
-            svg.svg(
-                {
-                    "xmlns": "http://www.w3.org/2000/svg",
-                    "width": "20",
-                    "height": "20",
-                    "fill": "none",
-                    "stroke": "currentColor",
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round",
-                    "stroke-width": "2",
-                    "viewBox": "0 0 24 24",
-                    "class": "feather feather-send",
-                },
-                svg.path({"d": "M22 2 11 13"}),
-                svg.path({"d": "M22 2 15 22 11 13 2 9z"})
-            )
+            send_button_ref.current  # Render the cached send button
         )
-    )
+    )
+
+
+# from reactpy import component, html, svg
+# from reactpy.core.hooks import use_ref
+
+# @component
+# # def ChatBox(message, set_message, handle_input_change, handle_key_down, send_message, collapsed):
+# def ChatBox(message, set_message, send_message, collapsed):
+    
+#     def handle_input_change(event):
+#         set_message(event['target']['value'])
+
+#     def handle_key_down(event):
+#         if event['key'] == 'Enter' and message.strip():
+#             send_message()
+
+#     return html.div(
+#         {
+#             "style": {
+#                 "position": "fixed",
+#                 "bottom": "70px" if collapsed else "140px",
+#                 "left": "50%",
+#                 "transform": "translateX(-50%)",
+#                 "width": "80%",
+#                 "display": "flex",
+#                 "alignItems": "center",
+#                 "backgroundColor": "#FFFFFF",
+#                 "borderRadius": "50px",
+#                 "zIndex": "1000",
+#             }
+#         },
+#         html.input(
+#             {
+#                 "type": "text",
+#                 "value": message,
+#                 "placeholder": "Your Message",
+#                 "onChange": handle_input_change,
+#                 "onKeyDown": handle_key_down,
+#                 "style": {
+#                     "width": "100%",
+#                     "padding": "10px 50px 10px 20px",
+#                     "border": "none",
+#                     "borderRadius": "50px",
+#                     "color": "#65558F",
+#                 }
+#             }
+#         ),
+#         html.button(
+#             {
+#                 "type": "button",
+#                 "onClick": send_message,
+#                 "style": {
+#                     "position": "absolute",
+#                     "right": "8px",
+#                     "top": "50%",
+#                     "transform":"translateY(-50%)",
+#                     "background": "none",
+#                     "border": "none",
+#                     "cursor": "pointer",
+#                     "padding": "8px",
+#                     "display": "flex",
+#                     "alignItems": "center",
+#                     "justifyContent": "center",
+#                 }
+#             },
+#             svg.svg(
+#                 {
+#                     "xmlns": "http://www.w3.org/2000/svg",
+#                     "width": "20",
+#                     "height": "20",
+#                     "fill": "none",
+#                     "stroke": "currentColor",
+#                     "stroke-linecap": "round",
+#                     "stroke-linejoin": "round",
+#                     "stroke-width": "2",
+#                     "viewBox": "0 0 24 24",
+#                     "class": "feather feather-send",
+#                 },
+#                 svg.path({"d": "M22 2 11 13"}),
+#                 svg.path({"d": "M22 2 15 22 11 13 2 9z"})
+#             )
+#         )
+#     )

chatui.py

@@ -2,6 +2,7 @@ from markdown_it import MarkdownIt
 from mdit_py_plugins import front_matter
 
 from reactpy import component, html
+from reactpy.core.hooks import use_ref
 
 from utils import wait_message
 
@@ -51,8 +52,10 @@ def ExamplePrompts(examples, send_example, first_turn):
             question
         )
 
-    if first_turn:
-        return html.div(
+    examples_ref = use_ref(None)
+
+    if examples_ref.current is None:
+        examples_ref.current = html.div(
             {
                 "style": {
                     "display": "flex",
@@ -86,6 +89,9 @@ def ExamplePrompts(examples, send_example, first_turn):
                 *[create_prompt_button(q) for q in example_questions]
             )
         )
+
+    if first_turn:
+        return examples_ref.current
     
     return None
 
@@ -118,9 +124,7 @@ def ChatMessage(user, message):
 
 @component
 def Logs(messages, log_entries, show_logs, set_show_logs, show_logs_button):
-    # print(f"DEBUG: LENGTH OF MESSAGES IS {len(messages)}")
-    # print(f"DEBUG: LENGTH OF LOG MESSAGES IS {len(log_entries)}")
-    # print(f"DEBUG: SHOW LOGS BUTTON IS {show_logs_button}")
+
     if (len(messages) > 0) and (len(log_entries) > 0) and (messages[-1]["message"] != wait_message) and (show_logs_button):
         if not show_logs:
             return html.div(

footer.py

@@ -1,10 +1,14 @@
-from reactpy import component, html, svg, hooks
+from reactpy import component, html, svg, hooks  
+from reactpy.core.hooks import use_ref  
 
 @component
 def Footer(collapsed, set_collapsed):
 
-    if collapsed:
-        return html.footer(
+    expanded_footer_ref = use_ref(None)
+    collapsed_footer_ref = use_ref(None)
+
+    if expanded_footer_ref.current is None:
+        expanded_footer_ref.current = html.footer(
             {
                 "style": {
                     "backgroundColor": "#FFFFFF",
@@ -44,8 +48,9 @@ def Footer(collapsed, set_collapsed):
                 )
             )
         )
-    else:
-        return html.footer(
+        
+    if collapsed_footer_ref.current is None:
+        collapsed_footer_ref.current = html.footer(
             {
                 "style": {
                     "backgroundColor": "#FFFFFF",
@@ -119,4 +124,135 @@ def Footer(collapsed, set_collapsed):
                     "It demonstrates the use of Agentic-RAG functionality with Vectara",
                 )
             )
-        )
+        )
+
+    if collapsed:
+        return expanded_footer_ref.current
+    else:
+        return collapsed_footer_ref.current
+
+
+
+
+# from reactpy import component, html, svg, hooks    
+
+# @component
+# def Footer(collapsed, set_collapsed):
+
+#     if collapsed:
+#         return html.footer(
+#             {
+#                 "style": {
+#                     "backgroundColor": "#FFFFFF",
+#                     "position": "fixed",
+#                     "bottom": 0,
+#                     "width": "100%",
+#                     "height": "50px",
+#                 }
+#             },
+#             html.button(
+#                 {
+#                     "style": {
+#                         "background": "none",
+#                         "border": "none",
+#                         "color": "#757575",
+#                         "cursor": "pointer",
+#                         "position": "absolute",
+#                         "bottom": "5px",
+#                         "right": "10px",
+#                     },
+#                     "type": "button",
+#                     "on_click": lambda _: set_collapsed(False)
+#                 },
+#                 svg.svg(
+#                     {
+#                         "xmlns": "http://www.w3.org/2000/svg",
+#                         "width": "24",
+#                         "height": "24",
+#                         "fill": "none",
+#                         "stroke": "currentColor",
+#                         "stroke-linecap": "round",
+#                         "stroke-linejoin": "round",
+#                         "stroke-width": "3",
+#                         "viewBox": "0 0 24 24",
+#                     },
+#                     svg.path({"d": "M19 14l-7-7-7 7"})
+#                 )
+#             )
+#         )
+#     else:
+#         return html.footer(
+#             {
+#                 "style": {
+#                     "backgroundColor": "#FFFFFF",
+#                     "position": "fixed",
+#                     "bottom": 0,
+#                     "width": "100%",
+#                 }
+#             },
+#             html.div(
+#                 {
+#                     "style": {
+#                         "backgroundColor": "#FFFFFF",
+#                         "padding": "0px 20px 0px 50px",
+#                         "position": "relative",
+#                         "display": "block",
+#                     }
+#                 },
+#                 html.button(
+#                     {
+#                         "style": {
+#                             "position": "absolute",
+#                             "right": "10px",
+#                             "background": "none",
+#                             "border": "none",
+#                             "color": "#757575",
+#                             "cursor": "pointer",
+#                         },
+#                         "type": "button",
+#                         "on_click": lambda _: set_collapsed(True)
+#                     },
+#                     svg.svg(
+#                         {
+#                             "xmlns": "http://www.w3.org/2000/svg",
+#                             "width": "24",
+#                             "height": "24",
+#                             "fill": "none",
+#                             "stroke": "currentColor",
+#                             "stroke-linecap": "round",
+#                             "stroke-linejoin": "round",
+#                             "stroke-width": "3",
+#                             "viewBox": "0 0 24 24",
+#                         },
+#                         svg.path({"d": "M18 6L6 18"}),
+#                         svg.path({"d": "M6 6l12 12"})
+#                     )
+#                 ),
+#                 html.p(
+#                     {
+#                         "style": {
+#                             "fontSize": "20px",
+#                             "color": "#4b4851"
+#                         }
+#                     },
+#                     "How this works?",
+#                 ),
+#                 html.p(
+#                     {
+#                         "style": {
+#                             "color": "#757575",
+#                         }
+#                     },
+#                     "This app was built with ",
+#                     html.a(
+#                         {
+#                             "href": "https://vectara.com/",
+#                             "target": "_blank",
+#                         },
+#                         "Vectara",
+#                     ),
+#                     html.br(),
+#                     "It demonstrates the use of Agentic-RAG functionality with Vectara",
+#                 )
+#             )
+#         )

header.py

@@ -1,4 +1,5 @@
 from reactpy import component, html, svg, hooks
+from reactpy.core.hooks import use_ref
 
 @component
 def Header(demo_name: str, short_description: str, extra_info: str, start_over):
@@ -7,16 +8,11 @@ def Header(demo_name: str, short_description: str, extra_info: str, start_over):
     def toggle_header(event=None):
         set_more_info(not more_info)
 
-    return html.header(
-        {
-            "style": {
-                "backgroundColor": "#FFFFFF",
-                "display": "flex",
-                "justifyContent": "space-between",
-                "alignItems": "center",
-            }
-        },
-        html.div(
+    logo_section_ref = use_ref(None)
+    start_over_ref = use_ref(None)
+
+    if logo_section_ref.current is None:
+        logo_section_ref.current = html.div(
             {
                 "style": {
                     "display": "flex",
@@ -46,7 +42,46 @@ def Header(demo_name: str, short_description: str, extra_info: str, start_over):
                 },
                 f"{demo_name}"
             ),
-        ),
+        )
+
+    if start_over_ref.current is None:
+        start_over_ref.current = html.div(
+            {
+                "style": {
+                    "flex": 2,
+                    "textAlign": "right",
+                    "padding": "10px",
+                }
+            },
+            html.button(
+                {
+                    "style": {
+                        "backgroundColor": "#FFFFFF",
+                        "color": "#757575",
+                        "fontSize": "14px",
+                        "cursor": "pointer",
+                        "border": "1px solid #e2dfdf",
+                        "borderRadius": "5px",
+                        "padding": "6px 20px",
+                        "marginRight": "15px",
+                    },
+                    "type": "button",
+                    "onClick": start_over,
+                },
+                "Start Over?"
+            )
+        )
+
+    return html.header(
+        {
+            "style": {
+                "backgroundColor": "#FFFFFF",
+                "display": "flex",
+                "justifyContent": "space-between",
+                "alignItems": "center",
+            }
+        },
+        logo_section_ref.current,
         html.div(
             {
                 "style": {
@@ -123,30 +158,5 @@ def Header(demo_name: str, short_description: str, extra_info: str, start_over):
                 )
             )
         ),
-        html.div(
-            {
-                "style": {
-                    "flex": 2,
-                    "textAlign": "right",
-                    "padding": "10px",
-                }
-            },
-            html.button(
-                {
-                    "style": {
-                        "backgroundColor": "#FFFFFF",
-                        "color": "#757575",
-                        "fontSize": "14px",
-                        "cursor": "pointer",
-                        "border": "1px solid #e2dfdf",
-                        "borderRadius": "5px",
-                        "padding": "6px 20px",
-                        "marginRight": "15px",
-                    },
-                    "type": "button",
-                    "onClick": start_over,
-                },
-                "Start Over?"
-            )
-        )
+        start_over_ref.current
     )