Reorganize Files

.env

@@ -0,0 +1,11 @@
+VECTARA_CUSTOMER_ID="1526022105"
+VECTARA_API_KEY="zqt_WvU_2ZD8owebGIuCtv_aWivgVyPGiH3pyF57bg"
+VECTARA_CORPUS_ID="279"
+VECTARA_AGENT_TYPE="OPENAI"
+VECTARA_AGENT_MAIN_LLM_PROVIDER="OPENAI"
+VECTARA_AGENT_TOOL_LLM_PROVIDER="OPENAI"
+OPENAI_API_KEY="sk-proj-ecGoQqchQtEztxM1oeTfT3BlbkFJ0sDJUagzIEUlW7JSK9tf"
+QUERY_EXAMPLES="Please explain the current eminent domain policies in Alaska; What are the elements of permitting requirements and notice?; What is adverse possession? What are the elements of adverse possession in Alaska?"
+DEMO_NAME="Legal Assistant"
+SHORT_DESCRIPTION="This demo can help you prepare for a court case by providing you information about past court cases in Alaska."
+EXTRA_INFO="You can ask about specific topics or rulings and get related case info, including the official case document and other cases cited in the final opinion. You can also ask the assistant to critique your argument to enhance your preparation."

Dockerfile

@@ -1,14 +1,14 @@
-ARG VECTARA_CUSTOMER_ID
-ARG VECTARA_API_KEY
-ARG VECTARA_CORPUS_ID
-ARG VECTARA_AGENT_TYPE
-ARG VECTARA_AGENT_MAIN_LLM_PROVIDER
-ARG VECTARA_AGENT_TOOL_LLM_PROVIDE
-ARG OPENAI_API_KEY
-ARG QUERY_EXAMPLES
-ARG DEMO_NAME
-ARG SHORT_DESCRIPTION
-ARG EXTRA_INFO
+# ARG VECTARA_CUSTOMER_ID
+# ARG VECTARA_API_KEY
+# ARG VECTARA_CORPUS_ID
+# ARG VECTARA_AGENT_TYPE
+# ARG VECTARA_AGENT_MAIN_LLM_PROVIDER
+# ARG VECTARA_AGENT_TOOL_LLM_PROVIDE
+# ARG OPENAI_API_KEY
+# ARG QUERY_EXAMPLES
+# ARG DEMO_NAME
+# ARG SHORT_DESCRIPTION
+# ARG EXTRA_INFO
 
 FROM python:3.10
 

app.py

@@ -1,39 +1,27 @@
 import asyncio
 import threading
-from markdown_it import MarkdownIt
-from mdit_py_plugins import front_matter
 
-from reactpy import component, html, hooks, use_effect, svg
+from reactpy import component, html, hooks, use_effect, run
 from reactpy.backend.starlette import configure
 from starlette.applications import Starlette
 from vectara_agentic.agent import AgentStatusType
 from agent import initialize_agent, get_agent_config
 
-wait_message = "Please wait. Assistant at work..."
+from header import Header
+from footer import Footer
+from chatbox import ChatBox
+from chatui import ChatUI
+from utils import wait_message
 
 @component
 def App():
-
-    # Used for showing/hiding logs
+    # State hooks
     show_logs, set_show_logs = hooks.use_state(False)
-
-    # Determining when the "Show Logs" button should appear
     show_logs_button, set_show_logs_button = hooks.use_state(False)
-
-    # Used for resetting chat bot with "Start Over" button.
+    collapsed, set_collapsed = hooks.use_state(False) # Whether or not the footer is collapsed
     first_turn, set_first_turn = hooks.use_state(True)
-
-    # Tracks the state of whether the header is collapsed or exapnded
-    more_info, set_more_info = hooks.use_state(False)
-
-    # Tracks the state of whether the footer is collapsed or expanded
-    collapsed, set_collapse = hooks.use_state(False)
-
-    # Record of Chat Messages
     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([])
@@ -46,6 +34,7 @@ def App():
 
         return agent_log_entries, add_log_entry, reset_log_entries
 
+    # Logger setup
     log_entries, add_log_entry, reset_log_entries = use_agent_logger()
 
     def update_func(status_type: AgentStatusType, msg: str):
@@ -53,16 +42,11 @@ def App():
             output = f"{status_type.value} - {msg}"
             add_log_entry(output)
 
+    # Agent setup
     cfg, _ = hooks.use_state(get_agent_config())
     agent, _ = hooks.use_state(initialize_agent(cfg, update_func))
 
-    def toggle_header(event=None):
-        set_more_info(not more_info)
-
-    def toggle_footer(event=None):
-        set_collapse(not collapsed)
-
-    # Clears all messages and resets chat interface
+    
     def start_over(event=None):
         set_messages([])
         set_first_turn(True)
@@ -70,7 +54,6 @@ def App():
     def display_message(new_messages):
         if first_turn:
             set_first_turn(False)
-
         set_messages(messages + list(new_messages))
         
     async def chat_response(user_message):
@@ -89,17 +72,14 @@ def App():
         set_show_logs_button(True)
 
     def send_message(event=None):
-        print(f"DEBUG: SEND MESSAGE CALLED FOR MESSAGE {message}")
         if message.strip():
             sent_message = message
             set_message("")
-            set_input_value("")
             set_show_logs_button(False)
             set_show_logs(False)
             reset_log_entries()
             display_message([{"user": "human", "message": sent_message}])
             display_message([{"user": "bot", "message": wait_message}])
-
             asyncio.create_task(send_message_async(sent_message))
 
     def send_example(ex_prompt):
@@ -112,576 +92,13 @@ def App():
 
             asyncio.create_task(send_message_async(sent_message))
 
-    # # 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):
-        new_value = event['target']['value']
-        set_input_value(new_value)
-
-    def handle_key_down(event):
-        if event['key'] == 'Enter':
-            send_message()
-
-    use_effect(lambda: set_message(input_value), [input_value])
-
-    @component
-    def Header(demo_name: str, short_description: str, extra_info: str):
-        return html.header(
-            {
-                "style": {
-                    "backgroundColor": "#FFFFFF",
-                    "display": "flex",
-                    "justifyContent": "space-between",
-                    "alignItems": "center",
-                }
-            },
-            html.div(
-                {
-                    "style": {
-                        "display": "flex",
-                        "alignItems": "center",
-                        "flex": 2,
-                        "textAlign": "left",
-                        "padding": "10px",
-                    }
-                },
-                html.img(
-                    {
-                        "src": "https://avatars.githubusercontent.com/u/108304503?s=200&v=4",
-                        "style": {
-                            "height": "30px",
-                            "marginRight": "15px",
-                            "marginLeft": "5px",
-                            "transform": "translateY(-2px)",
-                        }
-                    }
-                ),
-                html.p(
-                    {
-                        "style": {
-                            "fontSize": "25px",
-                            "fontFamily": "Georgia, 'Times New Roman', Times, serif",
-                        }
-                    },
-                    f"{demo_name}"
-                ),
-            ),
-            html.div(
-                {
-                    "style": {
-                        "flex": 5,
-                        "textAlign": "center",
-                        "padding": "10px 0px 15px 0px",
-                        "fontFamily": "Lato",
-                        "position": "relative",
-                    }
-                },
-                html.h3(f"Welcome to the {demo_name} Demo"),
-                html.p(
-                    short_description,
-                    html.button(
-                        {
-                            "style": {
-                                "display": "inline" if not more_info else "none",
-                                "backgroundColor": "#FFFFFF",
-                                "color": "#757575",
-                                "fontSize": "13px",
-                                "cursor": "pointer",
-                                "border": "none",
-                                "padding": "0px 0px 0px 5px",
-                            },
-                            "type": "button",
-                            "onClick": toggle_header,
-                        },
-                        html.u(
-                            {
-                                "style": {
-                                    "flex": 2,
-                                    "textAlign": "right",
-                                    "padding": "10px",
-                                }
-                            },
-                            "Learn More"
-                        )
-                    ),
-                    f" {extra_info}" if more_info else ""
-                ),
-                html.button(
-                    {
-                        "style": {
-                            "display": "block" if more_info else "none",
-                            "background": "none",
-                            "border": "none",
-                            "color": "#757575",
-                            "cursor": "pointer",
-                            "position": "absolute",
-                            "left": "50%",
-                            "transform": "translateX(-50%)",
-                            "bottom": "1px",
-                        },
-                        "type": "button",
-                        "on_click": toggle_header,
-                    },
-                    svg.svg(
-                        {
-                            "width": "20", 
-                            "height": "20", 
-                            "viewBox": "0 0 20 20", 
-                            "fill": "none", 
-                            "stroke": "black", 
-                            "strokeWidth": "2", 
-                            "strokeLinecap": "round", 
-                            "strokeLinejoin": "round",
-                        },
-                        svg.path(
-                            {
-                                "d": "M12 19V5M5 12l7-7 7 7", 
-                                "stroke": "currentColor",
-                            }
-                        )
-                    )
-                )
-            ),
-            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?"
-                )
-            )
-        )
-
-    def markdown_to_html(markdown_text):
-        md = (
-            MarkdownIt("commonmark", {"breaks": True, "html": True})
-            .use(front_matter.front_matter_plugin)
-        )
-        return md.render(markdown_text)
-
-    @component
-    def MarkdownRenderer(content):
-        html_content = markdown_to_html(content)
-        return html.div(
-            {
-                "style": {
-                    "fontFamily": "Arial",
-                    "color": "#49454F",
-                    "fontSize": "14px",
-                },
-                "dangerouslySetInnerHTML": {"__html": html_content}
-            }
-        )
-
-    @component
-    def ExamplePrompts():
-        example_questions = [example.strip() for example in cfg['examples'].split(";")] if cfg.examples else []
-
-        def create_prompt_button(question):
-            return html.button(
-                {
-                    "style": {
-                        "backgroundColor": "#FFFFFF",
-                        "borderWidth": "1px",
-                        "borderColor": "#65558F",
-                        "borderRadius": "20px",
-                        "padding": "5px 7px",
-                        "margin": "5px",
-                        "cursor": "pointer",
-                        "color": "#21005D",
-                        "fontSize": "13px",
-                    },
-                    "type": "button",
-                    "onClick": lambda _: send_example(question),
-                },
-                question
-            )
-
-        if first_turn:
-            return html.div(
-                {
-                    "style": {
-                        "display": "flex",
-                        "transform": "translate(4%, 100%)",
-                        "flexDirection": "column",
-                        "justifyContent": "center",
-                        "width": "90%",
-                    }
-                },
-                html.p(
-                    {
-                        "style": {
-                            "fontSize": "16px",
-                            "fontFamily": "Arial",
-                            "color": "#49454F",
-                            "marginBottom": "5px",
-                            "transform": "translateX(3%)",
-                            "textAlign": "left",
-                        }
-                    },
-                    "Queries to try:"
-                ),
-                html.div(
-                    {
-                        "style": {
-                            "display": "flex",
-                            "flexWrap": "wrap",
-                            "justifyContent": "center",
-                        }
-                    },
-                    *[create_prompt_button(q) for q in example_questions]
-                )
-            )
-        
-        return None
-
-    @component
-    def ChatBox():
-        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",
-                    "onInput": handle_input,
-                    "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"})
-                )
-            )
-        )
-
-
-    @component
-    def ChatMessage(user, message):
-
-        return html.div(
-            {
-                "style": {
-                    "display": "flex",
-                    "width": "75%",
-                    "transform": "translateX(20%)",
-                    "justifyContent": "flex-end" if user == "human" else "flex-start",
-                    "margin": "20px 0px 10px 0px"
-                }
-            },
-            html.div(
-                {
-                    "style": {
-                        "maxWidth": "50%",
-                        "padding": "0px 15px 0px 10px",
-                        "borderRadius": "15px",
-                        "backgroundColor": "#E8DEF8" if user == "human" else "#ECE6F0",
-                        "color": "#000000",
-                    }
-                },
-                MarkdownRenderer(message)
-            )
-        )
-    
-    @component
-    def Logs():
-        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(
-                    {
-                        "style": {
-                            "display": "flex",
-                            "transform": "translateX(75%)",
-                            "width": "20%",
-                            "margin": "0px",
-                        }
-                    },
-                    html.button(
-                        {
-                            "style": {
-                                "position": "flex",
-                                "background": "none",
-                                "color": "#757575",
-                                "border": "none",
-                                "cursor": "pointer",
-                                "fontFamily": "Arial",
-                                "fontSize": "14px",
-                            },
-                            "type": "button",
-                            "onClick": lambda _: set_show_logs(True)
-                        },
-                        "Show Logs"
-                    )
-                )
-            else:
-                return html.div(
-                    {
-                        "style": {
-                            "display": "flex",
-                            "transform": "translateX(20%)",
-                            "border": "2px solid #e2dfdf",
-                            "borderRadius": "10px",
-                            "width": "75%",
-                        }
-                    },
-                    html.div(
-                        [
-                            html.p(
-                                {
-                                    "style": {
-                                        "fontSize": "14px",
-                                    "marginLeft": "10px",
-                                    }
-                                },
-                                entry
-                            ) for entry in log_entries
-                        ],
-                        html.button(
-                        {
-                            "style": {
-                                "position": "flex",
-                                "background": "none",
-                                "color": "#757575",
-                                "border": "none",
-                                "cursor": "pointer",
-                                "fontFamily": "Arial",
-                                "fontSize": "14px",
-                                "marginBottom": "10px",
-                                "marginLeft": "5px",
-                            },
-                            "type": "button",
-                            "onClick": lambda _: set_show_logs(False)
-                        },
-                        "Hide Logs"
-                        )
-                    )
-                )
+    async def handle_key_down(event):
+        if event['key'] == 'Enter' and message.strip():
+            await send_message()
+            set_message("")
         
-        return None
-
-    @component
-    def ChatUI():
-
-        def render_chat_content():
-            if first_turn:
-                return ExamplePrompts()
-            else:
-                return [ChatMessage(msg["user"], msg["message"]) for msg in messages]
-
-        return html.div(
-            {
-                "style": {
-                    "display": "flex",
-                    "flexDirection": "column",
-                    "padding": "10px",
-                    "backgroundColor": "#F4F1F4",
-                    "overflowY": "auto",
-                    "height": f"calc(100vh - {265 if collapsed else 335}px)",
-                    "marginBottom": "15px",
-                    "paddingBottom": "15px",
-                },
-            },
-            render_chat_content(),
-            Logs()
-        )
-
-
-    @component
-    def Footer():
-
-        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": toggle_footer,
-                    },
-                    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": toggle_footer,
-                        },
-                        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",
-                    )
-                )
-            )
+    def handle_input_change(event):
+        set_message(event['target']['value'])
 
     return html.div(
         {
@@ -698,29 +115,38 @@ def App():
             }
         },
         html.head(
-            html.style("""
+            html.style(
+                """
                 body {
                     margin: 0;
                     padding: 0;
                 }
-            """)
+                """
+            )
         ),
         Header(
             demo_name=cfg['demo_name'],
             short_description=cfg['short_description'],
-            extra_info=cfg['extra_info']
+            extra_info=cfg['extra_info'],
+            start_over=start_over
         ),
-        ChatUI(),
-        ChatBox(),
-        Footer(),
+        ChatUI(
+            messages=messages,
+            first_turn=first_turn,
+            examples=cfg['examples'],
+            send_example=send_example,
+            log_entries=log_entries,
+            show_logs=show_logs,
+            set_show_logs=set_show_logs,
+            show_logs_button=show_logs_button,
+            collapsed=collapsed
+        ),
+        ChatBox(message, handle_input_change, handle_key_down, send_message, collapsed),
+        Footer(collapsed, set_collapsed),
     )
 
 app = Starlette()
-
 configure(app, App)
 
-# Should only need for local testing
-
 # if __name__ == "__main__":
-#     import uvicorn
-#     uvicorn.run(app, host="0.0.0.0", port=8000)
+#     run(App)

app2.py

@@ -0,0 +1,733 @@
+import asyncio
+import threading
+from markdown_it import MarkdownIt
+from mdit_py_plugins import front_matter
+
+from reactpy import component, html, hooks, use_effect, svg, run # DELETE run FOR DEPLOYMENT
+from reactpy.backend.starlette import configure
+from starlette.applications import Starlette
+from vectara_agentic.agent import AgentStatusType
+from agent import initialize_agent, get_agent_config
+
+wait_message = "Please wait. Assistant at work..."
+
+@component
+def App():
+
+    # Used for showing/hiding logs
+    show_logs, set_show_logs = hooks.use_state(False)
+
+    # Determining when the "Show Logs" button should appear
+    show_logs_button, set_show_logs_button = hooks.use_state(False)
+
+    # Used for resetting chat bot with "Start Over" button.
+    first_turn, set_first_turn = hooks.use_state(True)
+
+    # Tracks the state of whether the header is collapsed or exapnded
+    more_info, set_more_info = hooks.use_state(False)
+
+    # Tracks the state of whether the footer is collapsed or expanded
+    collapsed, set_collapse = hooks.use_state(False)
+
+    # Record of Chat Messages
+    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([])
+
+        def reset_log_entries():
+            set_agent_log_entries([])
+
+        def add_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
+
+    log_entries, add_log_entry, reset_log_entries = use_agent_logger()
+
+    def update_func(status_type: AgentStatusType, msg: str):
+        if status_type != AgentStatusType.AGENT_UPDATE:
+            output = f"{status_type.value} - {msg}"
+            add_log_entry(output)
+
+    cfg, _ = hooks.use_state(get_agent_config())
+    agent, _ = hooks.use_state(initialize_agent(cfg, update_func))
+
+    def toggle_header(event=None):
+        set_more_info(not more_info)
+
+    def toggle_footer(event=None):
+        set_collapse(not collapsed)
+
+    # Clears all messages and resets chat interface
+    def start_over(event=None):
+        set_messages([])
+        set_first_turn(True)
+
+    def display_message(new_messages):
+        if first_turn:
+            set_first_turn(False)
+
+        set_messages(messages + list(new_messages))
+        
+    async def chat_response(user_message):
+        response = await asyncio.to_thread(agent.chat, user_message)
+        return response
+
+    async def send_message_async(sent_message):
+        response = await chat_response(sent_message)
+        set_messages(messages[:-1])
+        display_message(
+            [
+                {"user": "human", "message": sent_message},
+                {"user": "bot", "message": response},
+            ]
+        )
+        set_show_logs_button(True)
+
+    def send_message(event=None):
+        print(f"DEBUG: SEND MESSAGE CALLED FOR MESSAGE {message}")
+        if message.strip():
+            sent_message = message
+            set_message("")
+            # set_input_value("")
+            set_show_logs_button(False)
+            set_show_logs(False)
+            reset_log_entries()
+            display_message([{"user": "human", "message": sent_message}])
+            display_message([{"user": "bot", "message": wait_message}])
+
+            asyncio.create_task(send_message_async(sent_message))
+
+    def send_example(ex_prompt):
+        if ex_prompt.strip():
+            sent_message = ex_prompt
+            set_message("")
+            reset_log_entries()
+            display_message([{"user": "human", "message": sent_message}])
+            display_message([{"user": "bot", "message": wait_message}])
+
+            asyncio.create_task(send_message_async(sent_message))
+
+    # # 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):
+    #     new_value = event['target']['value']
+    #     set_input_value(new_value)
+
+    # def handle_key_down(event):
+    #     if event['key'] == 'Enter':
+    #         send_message()
+
+    # use_effect(lambda: set_message(input_value), [input_value])
+
+    async def handle_key_down(event):
+        if event['key'] == 'Enter' and message.strip():
+            await send_message()
+            set_message("")
+        
+    def handle_input_change(event):
+        set_message(event['target']['value'])
+
+    @component
+    def Header(demo_name: str, short_description: str, extra_info: str):
+        return html.header(
+            {
+                "style": {
+                    "backgroundColor": "#FFFFFF",
+                    "display": "flex",
+                    "justifyContent": "space-between",
+                    "alignItems": "center",
+                }
+            },
+            html.div(
+                {
+                    "style": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "flex": 2,
+                        "textAlign": "left",
+                        "padding": "10px",
+                    }
+                },
+                html.img(
+                    {
+                        "src": "https://avatars.githubusercontent.com/u/108304503?s=200&v=4",
+                        "style": {
+                            "height": "30px",
+                            "marginRight": "15px",
+                            "marginLeft": "5px",
+                            "transform": "translateY(-2px)",
+                        }
+                    }
+                ),
+                html.p(
+                    {
+                        "style": {
+                            "fontSize": "25px",
+                            "fontFamily": "Georgia, 'Times New Roman', Times, serif",
+                        }
+                    },
+                    f"{demo_name}"
+                ),
+            ),
+            html.div(
+                {
+                    "style": {
+                        "flex": 5,
+                        "textAlign": "center",
+                        "padding": "10px 0px 15px 0px",
+                        "fontFamily": "Lato",
+                        "position": "relative",
+                    }
+                },
+                html.h3(f"Welcome to the {demo_name} Demo"),
+                html.p(
+                    short_description,
+                    html.button(
+                        {
+                            "style": {
+                                "display": "inline" if not more_info else "none",
+                                "backgroundColor": "#FFFFFF",
+                                "color": "#757575",
+                                "fontSize": "13px",
+                                "cursor": "pointer",
+                                "border": "none",
+                                "padding": "0px 0px 0px 5px",
+                            },
+                            "type": "button",
+                            "onClick": toggle_header,
+                        },
+                        html.u(
+                            {
+                                "style": {
+                                    "flex": 2,
+                                    "textAlign": "right",
+                                    "padding": "10px",
+                                }
+                            },
+                            "Learn More"
+                        )
+                    ),
+                    f" {extra_info}" if more_info else ""
+                ),
+                html.button(
+                    {
+                        "style": {
+                            "display": "block" if more_info else "none",
+                            "background": "none",
+                            "border": "none",
+                            "color": "#757575",
+                            "cursor": "pointer",
+                            "position": "absolute",
+                            "left": "50%",
+                            "transform": "translateX(-50%)",
+                            "bottom": "1px",
+                        },
+                        "type": "button",
+                        "on_click": toggle_header,
+                    },
+                    svg.svg(
+                        {
+                            "width": "20", 
+                            "height": "20", 
+                            "viewBox": "0 0 20 20", 
+                            "fill": "none", 
+                            "stroke": "black", 
+                            "strokeWidth": "2", 
+                            "strokeLinecap": "round", 
+                            "strokeLinejoin": "round",
+                        },
+                        svg.path(
+                            {
+                                "d": "M12 19V5M5 12l7-7 7 7", 
+                                "stroke": "currentColor",
+                            }
+                        )
+                    )
+                )
+            ),
+            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?"
+                )
+            )
+        )
+
+    def markdown_to_html(markdown_text):
+        md = (
+            MarkdownIt("commonmark", {"breaks": True, "html": True})
+            .use(front_matter.front_matter_plugin)
+        )
+        return md.render(markdown_text)
+
+    @component
+    def MarkdownRenderer(content):
+        html_content = markdown_to_html(content)
+        return html.div(
+            {
+                "style": {
+                    "fontFamily": "Arial",
+                    "color": "#49454F",
+                    "fontSize": "14px",
+                },
+                "dangerouslySetInnerHTML": {"__html": html_content}
+            }
+        )
+
+    @component
+    def ExamplePrompts():
+        example_questions = [example.strip() for example in cfg['examples'].split(";")] if cfg.examples else []
+
+        def create_prompt_button(question):
+            return html.button(
+                {
+                    "style": {
+                        "backgroundColor": "#FFFFFF",
+                        "borderWidth": "1px",
+                        "borderColor": "#65558F",
+                        "borderRadius": "20px",
+                        "padding": "5px 7px",
+                        "margin": "5px",
+                        "cursor": "pointer",
+                        "color": "#21005D",
+                        "fontSize": "13px",
+                    },
+                    "type": "button",
+                    "onClick": lambda _: send_example(question),
+                },
+                question
+            )
+
+        if first_turn:
+            return html.div(
+                {
+                    "style": {
+                        "display": "flex",
+                        "transform": "translate(4%, 100%)",
+                        "flexDirection": "column",
+                        "justifyContent": "center",
+                        "width": "90%",
+                    }
+                },
+                html.p(
+                    {
+                        "style": {
+                            "fontSize": "16px",
+                            "fontFamily": "Arial",
+                            "color": "#49454F",
+                            "marginBottom": "5px",
+                            "transform": "translateX(3%)",
+                            "textAlign": "left",
+                        }
+                    },
+                    "Queries to try:"
+                ),
+                html.div(
+                    {
+                        "style": {
+                            "display": "flex",
+                            "flexWrap": "wrap",
+                            "justifyContent": "center",
+                        }
+                    },
+                    *[create_prompt_button(q) for q in example_questions]
+                )
+            )
+        
+        return None
+
+    @component
+    def ChatBox():
+        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"})
+                )
+            )
+        )
+
+
+    @component
+    def ChatMessage(user, message):
+
+        return html.div(
+            {
+                "style": {
+                    "display": "flex",
+                    "width": "75%",
+                    "transform": "translateX(20%)",
+                    "justifyContent": "flex-end" if user == "human" else "flex-start",
+                    "margin": "20px 0px 10px 0px"
+                }
+            },
+            html.div(
+                {
+                    "style": {
+                        "maxWidth": "50%",
+                        "padding": "0px 15px 0px 10px",
+                        "borderRadius": "15px",
+                        "backgroundColor": "#E8DEF8" if user == "human" else "#ECE6F0",
+                        "color": "#000000",
+                    }
+                },
+                MarkdownRenderer(message)
+            )
+        )
+    
+    @component
+    def Logs():
+        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(
+                    {
+                        "style": {
+                            "display": "flex",
+                            "transform": "translateX(75%)",
+                            "width": "20%",
+                            "margin": "0px",
+                        }
+                    },
+                    html.button(
+                        {
+                            "style": {
+                                "position": "flex",
+                                "background": "none",
+                                "color": "#757575",
+                                "border": "none",
+                                "cursor": "pointer",
+                                "fontFamily": "Arial",
+                                "fontSize": "14px",
+                            },
+                            "type": "button",
+                            "onClick": lambda _: set_show_logs(True)
+                        },
+                        "Show Logs"
+                    )
+                )
+            else:
+                return html.div(
+                    {
+                        "style": {
+                            "display": "flex",
+                            "transform": "translateX(20%)",
+                            "border": "2px solid #e2dfdf",
+                            "borderRadius": "10px",
+                            "width": "75%",
+                        }
+                    },
+                    html.div(
+                        [
+                            html.p(
+                                {
+                                    "style": {
+                                        "fontSize": "14px",
+                                    "marginLeft": "10px",
+                                    }
+                                },
+                                entry
+                            ) for entry in log_entries
+                        ],
+                        html.button(
+                        {
+                            "style": {
+                                "position": "flex",
+                                "background": "none",
+                                "color": "#757575",
+                                "border": "none",
+                                "cursor": "pointer",
+                                "fontFamily": "Arial",
+                                "fontSize": "14px",
+                                "marginBottom": "10px",
+                                "marginLeft": "5px",
+                            },
+                            "type": "button",
+                            "onClick": lambda _: set_show_logs(False)
+                        },
+                        "Hide Logs"
+                        )
+                    )
+                )
+        
+        return None
+
+    @component
+    def ChatUI():
+
+        def render_chat_content():
+            if first_turn:
+                return ExamplePrompts()
+            else:
+                return [ChatMessage(msg["user"], msg["message"]) for msg in messages]
+
+        return html.div(
+            {
+                "style": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "padding": "10px",
+                    "backgroundColor": "#F4F1F4",
+                    "overflowY": "auto",
+                    "height": f"calc(100vh - {265 if collapsed else 335}px)",
+                    "marginBottom": "15px",
+                    "paddingBottom": "15px",
+                },
+            },
+            render_chat_content(),
+            Logs()
+        )
+
+
+    @component
+    def Footer():
+
+        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": toggle_footer,
+                    },
+                    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": toggle_footer,
+                        },
+                        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",
+                    )
+                )
+            )
+
+    return html.div(
+        {
+            "style": {
+                "backgroundColor": "#F4F1F4",
+                "margin": "0",
+                "padding": "0",
+                "minHeight": "100vh",
+                "display": "flex",
+                "boxSizing": "border-box",
+                "flexDirection": "column",
+                "overflowX": "hidden",
+                "position": "relative",
+            }
+        },
+        html.head(
+            html.style("""
+                body {
+                    margin: 0;
+                    padding: 0;
+                }
+            """)
+        ),
+        Header(
+            demo_name=cfg['demo_name'],
+            short_description=cfg['short_description'],
+            extra_info=cfg['extra_info']
+        ),
+        ChatUI(),
+        ChatBox(),
+        Footer(),
+    )
+
+# app = Starlette()
+
+# configure(app, App)
+
+# Should only need for local testing
+
+if __name__ == "__main__":
+    run(App)

app_full.py

@@ -0,0 +1,714 @@
+import asyncio
+import threading
+from markdown_it import MarkdownIt
+from mdit_py_plugins import front_matter
+
+from reactpy import component, html, hooks, use_effect, svg, run # DELETE run FOR DEPLOYMENT
+from reactpy.backend.starlette import configure
+from starlette.applications import Starlette
+from vectara_agentic.agent import AgentStatusType
+from agent import initialize_agent, get_agent_config
+
+wait_message = "Please wait. Assistant at work..."
+
+@component
+def App():
+
+    # Used for showing/hiding logs
+    show_logs, set_show_logs = hooks.use_state(False)
+
+    # Determining when the "Show Logs" button should appear
+    show_logs_button, set_show_logs_button = hooks.use_state(False)
+
+    # Used for resetting chat bot with "Start Over" button.
+    first_turn, set_first_turn = hooks.use_state(True)
+
+    # Tracks the state of whether the header is collapsed or exapnded
+    more_info, set_more_info = hooks.use_state(False)
+
+    # Tracks the state of whether the footer is collapsed or expanded
+    collapsed, set_collapse = hooks.use_state(False)
+
+    # Record of Chat Messages
+    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([])
+
+        def reset_log_entries():
+            set_agent_log_entries([])
+
+        def add_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
+
+    log_entries, add_log_entry, reset_log_entries = use_agent_logger()
+
+    def update_func(status_type: AgentStatusType, msg: str):
+        if status_type != AgentStatusType.AGENT_UPDATE:
+            output = f"{status_type.value} - {msg}"
+            add_log_entry(output)
+
+    cfg, _ = hooks.use_state(get_agent_config())
+    agent, _ = hooks.use_state(initialize_agent(cfg, update_func))
+
+    def toggle_header(event=None):
+        set_more_info(not more_info)
+
+    def toggle_footer(event=None):
+        set_collapse(not collapsed)
+
+    # Clears all messages and resets chat interface
+    def start_over(event=None):
+        set_messages([])
+        set_first_turn(True)
+
+    def display_message(new_messages):
+        if first_turn:
+            set_first_turn(False)
+
+        set_messages(messages + list(new_messages))
+        
+    async def chat_response(user_message):
+        response = await asyncio.to_thread(agent.chat, user_message)
+        return response
+
+    async def send_message_async(sent_message):
+        response = await chat_response(sent_message)
+        set_messages(messages[:-1])
+        display_message(
+            [
+                {"user": "human", "message": sent_message},
+                {"user": "bot", "message": response},
+            ]
+        )
+        set_show_logs_button(True)
+
+    def send_message(event=None):
+        print(f"DEBUG: SEND MESSAGE CALLED FOR MESSAGE {message}")
+        if message.strip():
+            sent_message = message
+            set_message("")
+            # set_input_value("")
+            set_show_logs_button(False)
+            set_show_logs(False)
+            reset_log_entries()
+            display_message([{"user": "human", "message": sent_message}])
+            display_message([{"user": "bot", "message": wait_message}])
+
+            asyncio.create_task(send_message_async(sent_message))
+
+    def send_example(ex_prompt):
+        if ex_prompt.strip():
+            sent_message = ex_prompt
+            set_message("")
+            reset_log_entries()
+            display_message([{"user": "human", "message": sent_message}])
+            display_message([{"user": "bot", "message": wait_message}])
+
+            asyncio.create_task(send_message_async(sent_message))
+
+    async def handle_key_down(event):
+        if event['key'] == 'Enter' and message.strip():
+            await send_message()
+            set_message("")
+        
+    def handle_input_change(event):
+        set_message(event['target']['value'])
+
+    @component
+    def Header(demo_name: str, short_description: str, extra_info: str):
+        return html.header(
+            {
+                "style": {
+                    "backgroundColor": "#FFFFFF",
+                    "display": "flex",
+                    "justifyContent": "space-between",
+                    "alignItems": "center",
+                }
+            },
+            html.div(
+                {
+                    "style": {
+                        "display": "flex",
+                        "alignItems": "center",
+                        "flex": 2,
+                        "textAlign": "left",
+                        "padding": "10px",
+                    }
+                },
+                html.img(
+                    {
+                        "src": "https://avatars.githubusercontent.com/u/108304503?s=200&v=4",
+                        "style": {
+                            "height": "30px",
+                            "marginRight": "15px",
+                            "marginLeft": "5px",
+                            "transform": "translateY(-2px)",
+                        }
+                    }
+                ),
+                html.p(
+                    {
+                        "style": {
+                            "fontSize": "25px",
+                            "fontFamily": "Georgia, 'Times New Roman', Times, serif",
+                        }
+                    },
+                    f"{demo_name}"
+                ),
+            ),
+            html.div(
+                {
+                    "style": {
+                        "flex": 5,
+                        "textAlign": "center",
+                        "padding": "10px 0px 15px 0px",
+                        "fontFamily": "Lato",
+                        "position": "relative",
+                    }
+                },
+                html.h3(f"Welcome to the {demo_name} Demo"),
+                html.p(
+                    short_description,
+                    html.button(
+                        {
+                            "style": {
+                                "display": "inline" if not more_info else "none",
+                                "backgroundColor": "#FFFFFF",
+                                "color": "#757575",
+                                "fontSize": "13px",
+                                "cursor": "pointer",
+                                "border": "none",
+                                "padding": "0px 0px 0px 5px",
+                            },
+                            "type": "button",
+                            "onClick": toggle_header,
+                        },
+                        html.u(
+                            {
+                                "style": {
+                                    "flex": 2,
+                                    "textAlign": "right",
+                                    "padding": "10px",
+                                }
+                            },
+                            "Learn More"
+                        )
+                    ),
+                    f" {extra_info}" if more_info else ""
+                ),
+                html.button(
+                    {
+                        "style": {
+                            "display": "block" if more_info else "none",
+                            "background": "none",
+                            "border": "none",
+                            "color": "#757575",
+                            "cursor": "pointer",
+                            "position": "absolute",
+                            "left": "50%",
+                            "transform": "translateX(-50%)",
+                            "bottom": "1px",
+                        },
+                        "type": "button",
+                        "on_click": toggle_header,
+                    },
+                    svg.svg(
+                        {
+                            "width": "20", 
+                            "height": "20", 
+                            "viewBox": "0 0 20 20", 
+                            "fill": "none", 
+                            "stroke": "black", 
+                            "strokeWidth": "2", 
+                            "strokeLinecap": "round", 
+                            "strokeLinejoin": "round",
+                        },
+                        svg.path(
+                            {
+                                "d": "M12 19V5M5 12l7-7 7 7", 
+                                "stroke": "currentColor",
+                            }
+                        )
+                    )
+                )
+            ),
+            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?"
+                )
+            )
+        )
+
+    def markdown_to_html(markdown_text):
+        md = (
+            MarkdownIt("commonmark", {"breaks": True, "html": True})
+            .use(front_matter.front_matter_plugin)
+        )
+        return md.render(markdown_text)
+
+    @component
+    def MarkdownRenderer(content):
+        html_content = markdown_to_html(content)
+        return html.div(
+            {
+                "style": {
+                    "fontFamily": "Arial",
+                    "color": "#49454F",
+                    "fontSize": "14px",
+                },
+                "dangerouslySetInnerHTML": {"__html": html_content}
+            }
+        )
+
+    @component
+    def ExamplePrompts():
+        example_questions = [example.strip() for example in cfg['examples'].split(";")] if cfg.examples else []
+
+        def create_prompt_button(question):
+            return html.button(
+                {
+                    "style": {
+                        "backgroundColor": "#FFFFFF",
+                        "borderWidth": "1px",
+                        "borderColor": "#65558F",
+                        "borderRadius": "20px",
+                        "padding": "5px 7px",
+                        "margin": "5px",
+                        "cursor": "pointer",
+                        "color": "#21005D",
+                        "fontSize": "13px",
+                    },
+                    "type": "button",
+                    "onClick": lambda _: send_example(question),
+                },
+                question
+            )
+
+        if first_turn:
+            return html.div(
+                {
+                    "style": {
+                        "display": "flex",
+                        "transform": "translate(4%, 100%)",
+                        "flexDirection": "column",
+                        "justifyContent": "center",
+                        "width": "90%",
+                    }
+                },
+                html.p(
+                    {
+                        "style": {
+                            "fontSize": "16px",
+                            "fontFamily": "Arial",
+                            "color": "#49454F",
+                            "marginBottom": "5px",
+                            "transform": "translateX(3%)",
+                            "textAlign": "left",
+                        }
+                    },
+                    "Queries to try:"
+                ),
+                html.div(
+                    {
+                        "style": {
+                            "display": "flex",
+                            "flexWrap": "wrap",
+                            "justifyContent": "center",
+                        }
+                    },
+                    *[create_prompt_button(q) for q in example_questions]
+                )
+            )
+        
+        return None
+
+    @component
+    def ChatBox():
+        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"})
+                )
+            )
+        )
+
+
+    @component
+    def ChatMessage(user, message):
+
+        return html.div(
+            {
+                "style": {
+                    "display": "flex",
+                    "width": "75%",
+                    "transform": "translateX(20%)",
+                    "justifyContent": "flex-end" if user == "human" else "flex-start",
+                    "margin": "20px 0px 10px 0px"
+                }
+            },
+            html.div(
+                {
+                    "style": {
+                        "maxWidth": "50%",
+                        "padding": "0px 15px 0px 10px",
+                        "borderRadius": "15px",
+                        "backgroundColor": "#E8DEF8" if user == "human" else "#ECE6F0",
+                        "color": "#000000",
+                    }
+                },
+                MarkdownRenderer(message)
+            )
+        )
+    
+    @component
+    def Logs():
+        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(
+                    {
+                        "style": {
+                            "display": "flex",
+                            "transform": "translateX(75%)",
+                            "width": "20%",
+                            "margin": "0px",
+                        }
+                    },
+                    html.button(
+                        {
+                            "style": {
+                                "position": "flex",
+                                "background": "none",
+                                "color": "#757575",
+                                "border": "none",
+                                "cursor": "pointer",
+                                "fontFamily": "Arial",
+                                "fontSize": "14px",
+                            },
+                            "type": "button",
+                            "onClick": lambda _: set_show_logs(True)
+                        },
+                        "Show Logs"
+                    )
+                )
+            else:
+                return html.div(
+                    {
+                        "style": {
+                            "display": "flex",
+                            "transform": "translateX(20%)",
+                            "border": "2px solid #e2dfdf",
+                            "borderRadius": "10px",
+                            "width": "75%",
+                        }
+                    },
+                    html.div(
+                        [
+                            html.p(
+                                {
+                                    "style": {
+                                        "fontSize": "14px",
+                                    "marginLeft": "10px",
+                                    }
+                                },
+                                entry
+                            ) for entry in log_entries
+                        ],
+                        html.button(
+                        {
+                            "style": {
+                                "position": "flex",
+                                "background": "none",
+                                "color": "#757575",
+                                "border": "none",
+                                "cursor": "pointer",
+                                "fontFamily": "Arial",
+                                "fontSize": "14px",
+                                "marginBottom": "10px",
+                                "marginLeft": "5px",
+                            },
+                            "type": "button",
+                            "onClick": lambda _: set_show_logs(False)
+                        },
+                        "Hide Logs"
+                        )
+                    )
+                )
+        
+        return None
+
+    @component
+    def ChatUI():
+
+        def render_chat_content():
+            if first_turn:
+                return ExamplePrompts()
+            else:
+                return [ChatMessage(msg["user"], msg["message"]) for msg in messages]
+
+        return html.div(
+            {
+                "style": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "padding": "10px",
+                    "backgroundColor": "#F4F1F4",
+                    "overflowY": "auto",
+                    "height": f"calc(100vh - {265 if collapsed else 335}px)",
+                    "marginBottom": "15px",
+                    "paddingBottom": "15px",
+                },
+            },
+            render_chat_content(),
+            Logs()
+        )
+
+
+    @component
+    def Footer():
+
+        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": toggle_footer,
+                    },
+                    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": toggle_footer,
+                        },
+                        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",
+                    )
+                )
+            )
+
+    return html.div(
+        {
+            "style": {
+                "backgroundColor": "#F4F1F4",
+                "margin": "0",
+                "padding": "0",
+                "minHeight": "100vh",
+                "display": "flex",
+                "boxSizing": "border-box",
+                "flexDirection": "column",
+                "overflowX": "hidden",
+                "position": "relative",
+            }
+        },
+        html.head(
+            html.style("""
+                body {
+                    margin: 0;
+                    padding: 0;
+                }
+            """)
+        ),
+        Header(
+            demo_name=cfg['demo_name'],
+            short_description=cfg['short_description'],
+            extra_info=cfg['extra_info']
+        ),
+        ChatUI(),
+        ChatBox(),
+        Footer(),
+    )
+
+# app = Starlette()
+
+# configure(app, App)
+
+# Should only need for local testing
+
+if __name__ == "__main__":
+    run(App)

chatbox.py

@@ -0,0 +1,71 @@
+from reactpy import component, html, svg
+
+@component
+def ChatBox(message, handle_input_change, handle_key_down, send_message, collapsed):
+    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

@@ -0,0 +1,219 @@
+from markdown_it import MarkdownIt
+from mdit_py_plugins import front_matter
+
+from reactpy import component, html
+
+from utils import wait_message
+
+
+def markdown_to_html(markdown_text):
+    md = (
+        MarkdownIt("commonmark", {"breaks": True, "html": True})
+        .use(front_matter.front_matter_plugin)
+    )
+    return md.render(markdown_text)
+
+@component
+def MarkdownRenderer(content):
+    html_content = markdown_to_html(content)
+    return html.div(
+        {
+            "style": {
+                "fontFamily": "Arial",
+                "color": "#49454F",
+                "fontSize": "14px",
+            },
+            "dangerouslySetInnerHTML": {"__html": html_content}
+        }
+    )
+
+@component
+def ExamplePrompts(examples, send_example, first_turn):
+    example_questions = [example.strip() for example in examples.split(";")] if examples else []
+
+    def create_prompt_button(question):
+        return html.button(
+            {
+                "style": {
+                    "backgroundColor": "#FFFFFF",
+                    "borderWidth": "1px",
+                    "borderColor": "#65558F",
+                    "borderRadius": "20px",
+                    "padding": "5px 7px",
+                    "margin": "5px",
+                    "cursor": "pointer",
+                    "color": "#21005D",
+                    "fontSize": "13px",
+                },
+                "type": "button",
+                "onClick": lambda _: send_example(question),
+            },
+            question
+        )
+
+    if first_turn:
+        return html.div(
+            {
+                "style": {
+                    "display": "flex",
+                    "transform": "translate(4%, 100%)",
+                    "flexDirection": "column",
+                    "justifyContent": "center",
+                    "width": "90%",
+                }
+            },
+            html.p(
+                {
+                    "style": {
+                        "fontSize": "16px",
+                        "fontFamily": "Arial",
+                        "color": "#49454F",
+                        "marginBottom": "5px",
+                        "transform": "translateX(3%)",
+                        "textAlign": "left",
+                    }
+                },
+                "Queries to try:"
+            ),
+            html.div(
+                {
+                    "style": {
+                        "display": "flex",
+                        "flexWrap": "wrap",
+                        "justifyContent": "center",
+                    }
+                },
+                *[create_prompt_button(q) for q in example_questions]
+            )
+        )
+    
+    return None
+
+@component
+def ChatMessage(user, message):
+
+    return html.div(
+        {
+            "style": {
+                "display": "flex",
+                "width": "75%",
+                "transform": "translateX(20%)",
+                "justifyContent": "flex-end" if user == "human" else "flex-start",
+                "margin": "20px 0px 10px 0px"
+            }
+        },
+        html.div(
+            {
+                "style": {
+                    "maxWidth": "50%",
+                    "padding": "0px 15px 0px 10px",
+                    "borderRadius": "15px",
+                    "backgroundColor": "#E8DEF8" if user == "human" else "#ECE6F0",
+                    "color": "#000000",
+                }
+            },
+            MarkdownRenderer(message)
+        )
+    )
+
+@component
+def Logs(messages, log_entries, show_logs, set_show_logs, 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(
+                {
+                    "style": {
+                        "display": "flex",
+                        "transform": "translateX(75%)",
+                        "width": "20%",
+                        "margin": "0px",
+                    }
+                },
+                html.button(
+                    {
+                        "style": {
+                            "position": "flex",
+                            "background": "none",
+                            "color": "#757575",
+                            "border": "none",
+                            "cursor": "pointer",
+                            "fontFamily": "Arial",
+                            "fontSize": "14px",
+                        },
+                        "type": "button",
+                        "onClick": lambda _: set_show_logs(True)
+                    },
+                    "Show Logs"
+                )
+            )
+        else:
+            return html.div(
+                {
+                    "style": {
+                        "display": "flex",
+                        "transform": "translateX(20%)",
+                        "border": "2px solid #e2dfdf",
+                        "borderRadius": "10px",
+                        "width": "75%",
+                    }
+                },
+                html.div(
+                    [
+                        html.p(
+                            {
+                                "style": {
+                                    "fontSize": "14px",
+                                "marginLeft": "10px",
+                                }
+                            },
+                            entry
+                        ) for entry in log_entries
+                    ],
+                    html.button(
+                    {
+                        "style": {
+                            "position": "flex",
+                            "background": "none",
+                            "color": "#757575",
+                            "border": "none",
+                            "cursor": "pointer",
+                            "fontFamily": "Arial",
+                            "fontSize": "14px",
+                            "marginBottom": "10px",
+                            "marginLeft": "5px",
+                        },
+                        "type": "button",
+                        "onClick": lambda _: set_show_logs(False)
+                    },
+                    "Hide Logs"
+                    )
+                )
+            )
+    
+    return None
+
+@component
+def ChatUI(messages, first_turn, examples, send_example, log_entries, show_logs, set_show_logs, show_logs_button, collapsed):
+
+    def render_chat_content():
+        if first_turn:
+            return ExamplePrompts(examples, send_example, first_turn)
+        else:
+            return [ChatMessage(msg["user"], msg["message"]) for msg in messages]
+
+    return html.div(
+        {
+            "style": {
+                "display": "flex",
+                "flexDirection": "column",
+                "padding": "10px",
+                "backgroundColor": "#F4F1F4",
+                "overflowY": "auto",
+                "height": f"calc(100vh - {265 if collapsed else 335}px)",
+                "marginBottom": "15px",
+                "paddingBottom": "15px",
+            },
+        },
+        render_chat_content(),
+        Logs(messages, log_entries, show_logs, set_show_logs, show_logs_button)
+    )

footer.py

@@ -0,0 +1,127 @@
+from reactpy import component, html, svg, hooks
+
+@component
+def Footer(collapsed, set_collapsed):
+
+    # def toggle_footer(event=None):
+    #     set_collapse(not 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)
+                    # "on_click": toggle_footer,
+                },
+                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)
+                        # "on_click": toggle_footer,
+                    },
+                    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

@@ -0,0 +1,152 @@
+from reactpy import component, html, svg, hooks
+
+@component
+def Header(demo_name: str, short_description: str, extra_info: str, start_over):
+    more_info, set_more_info = hooks.use_state(False)
+
+    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(
+            {
+                "style": {
+                    "display": "flex",
+                    "alignItems": "center",
+                    "flex": 2,
+                    "textAlign": "left",
+                    "padding": "10px",
+                }
+            },
+            html.img(
+                {
+                    "src": "https://avatars.githubusercontent.com/u/108304503?s=200&v=4",
+                    "style": {
+                        "height": "30px",
+                        "marginRight": "15px",
+                        "marginLeft": "5px",
+                        "transform": "translateY(-2px)",
+                    }
+                }
+            ),
+            html.p(
+                {
+                    "style": {
+                        "fontSize": "25px",
+                        "fontFamily": "Georgia, 'Times New Roman', Times, serif",
+                    }
+                },
+                f"{demo_name}"
+            ),
+        ),
+        html.div(
+            {
+                "style": {
+                    "flex": 5,
+                    "textAlign": "center",
+                    "padding": "10px 0px 15px 0px",
+                    "fontFamily": "Lato",
+                    "position": "relative",
+                }
+            },
+            html.h3(f"Welcome to the {demo_name} Demo"),
+            html.p(
+                short_description,
+                html.button(
+                    {
+                        "style": {
+                            "display": "inline" if not more_info else "none",
+                            "backgroundColor": "#FFFFFF",
+                            "color": "#757575",
+                            "fontSize": "13px",
+                            "cursor": "pointer",
+                            "border": "none",
+                            "padding": "0px 0px 0px 5px",
+                        },
+                        "type": "button",
+                        "onClick": toggle_header,
+                    },
+                    html.u(
+                        {
+                            "style": {
+                                "flex": 2,
+                                "textAlign": "right",
+                                "padding": "10px",
+                            }
+                        },
+                        "Learn More"
+                    )
+                ),
+                f" {extra_info}" if more_info else ""
+            ),
+            html.button(
+                {
+                    "style": {
+                        "display": "block" if more_info else "none",
+                        "background": "none",
+                        "border": "none",
+                        "color": "#757575",
+                        "cursor": "pointer",
+                        "position": "absolute",
+                        "left": "50%",
+                        "transform": "translateX(-50%)",
+                        "bottom": "1px",
+                    },
+                    "type": "button",
+                    "on_click": toggle_header,
+                },
+                svg.svg(
+                    {
+                        "width": "20", 
+                        "height": "20", 
+                        "viewBox": "0 0 20 20", 
+                        "fill": "none", 
+                        "stroke": "black", 
+                        "strokeWidth": "2", 
+                        "strokeLinecap": "round", 
+                        "strokeLinejoin": "round",
+                    },
+                    svg.path(
+                        {
+                            "d": "M12 19V5M5 12l7-7 7 7", 
+                            "stroke": "currentColor",
+                        }
+                    )
+                )
+            )
+        ),
+        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?"
+            )
+        )
+    )

requirements.txt

@@ -5,6 +5,6 @@ python-dotenv==1.0.1
 uuid==1.30
 langdetect==1.0.9
 langcodes==3.4.0
-vectara-agentic==0.1.6
+vectara-agentic==0.1.7
 markdown-it-py==3.0.0
 mdit-py-plugins==0.4.1

utils.py

@@ -0,0 +1,3 @@
+
+
+wait_message = "Please wait. Assistant at work..."