app2.py

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)