Add App Files

Dockerfile

@@ -0,0 +1,30 @@
+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
+
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip3 install --no-cache-dir -r requirements.txt
+
+EXPOSE 8000
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]

agent.py

@@ -0,0 +1,235 @@
+import os
+import re
+import requests
+import json
+from typing import Tuple, List
+
+from omegaconf import OmegaConf
+
+from typing import Optional
+from pydantic import Field, BaseModel
+
+from vectara_agentic.agent import Agent
+from vectara_agentic.tools import ToolsFactory, VectaraToolFactory
+from vectara_agentic.tools_catalog import summarize_text
+
+from dotenv import load_dotenv
+load_dotenv(override=True)
+
+citation_description = '''
+    The citation for a particular case. 
+    Citation must include the volume number, reporter, and first page. For example: 253 P.2d 136.
+'''
+
+def extract_components_from_citation(citation: str) -> Tuple[int, str, int]:
+    citation_components = citation.split(' ')
+    volume_num = citation_components[0]
+    reporter = '-'.join(citation_components[1:-1]).replace('.', '').lower()
+    first_page = citation_components[-1]
+
+    if not volume_num.isdigit():
+        raise ValueError("volume number must be a number.")
+    if not first_page.isdigit():
+        raise ValueError("first page number must be a number.")
+
+    return int(volume_num), reporter, int(first_page)
+
+def create_assistant_tools(cfg):
+
+    def get_opinion_text(
+            case_citation = Field(description = citation_description),
+            summarize: Optional[bool] = False
+            ) -> str:
+        """
+        Given case citation, returns the full opinion/ruling text of the case.
+        if summarize is True, the text is summarized.
+        If there is more than one opinion for the case, the type of each opinion is returned with the text, 
+        and the opinions (or their summaries) are separated by semicolons (;)
+        """
+        volume_num, reporter, first_page = extract_components_from_citation(case_citation)
+        response = requests.get(f"https://static.case.law/{reporter}/{volume_num}/cases/{first_page:04d}-01.json")
+        if response.status_code != 200:
+            return "Case not found; please check the citation."
+        res = json.loads(response.text)
+
+        if len(res["casebody"]["opinions"]) == 1:
+            text = res["casebody"]["opinions"][0]["text"]
+            output = text if not summarize else summarize_text(text, "law")
+        else:
+            output = ""
+            for opinion in res["casebody"]["opinions"]:
+                text = opinion["text"] if not summarize else summarize_text(opinion["text"], "law")
+                output += f"Opinion type: {opinion['type']}, text: {text};"
+        
+        return output
+
+    def get_case_document_pdf(
+            case_citation = Field(description = citation_description)
+            ) -> str:
+        """
+        Given a case citation, returns a valid web url to a pdf of the case record
+        """
+        volume_num, reporter, first_page = extract_components_from_citation(case_citation)
+        response = requests.get(f"https://static.case.law/{reporter}/{volume_num}/cases/{first_page:04d}-01.json")
+        if response.status_code != 200:
+            return "Case not found; please check the citation."
+        res = json.loads(response.text)
+        page_number = res["first_page_order"]
+        return f"https://static.case.law/{reporter}/{volume_num}.pdf#page={page_number}"
+
+    def get_case_document_page(
+            case_citation = Field(description = citation_description)
+            ) -> str:
+        """
+        Given a case citation, returns a valid web url to a page with information about the case.
+        """
+        volume_num, reporter, first_page = extract_components_from_citation(case_citation)
+        url = f"https://case.law/caselaw/?reporter={reporter}&volume={volume_num}&case={first_page:04d}-01"
+        response = requests.get(url)
+        if response.status_code != 200:
+            return "Case not found; please check the citation."
+        return url
+        
+    def get_case_name(
+            case_citation = Field(description = citation_description)
+            ) -> Tuple[str, str]:
+        """
+        Given a case citation, returns its name and name abbreviation.
+        """
+        volume_num, reporter, first_page = extract_components_from_citation(case_citation)
+        response = requests.get(f"https://static.case.law/{reporter}/{volume_num}/cases/{first_page:04d}-01.json")
+        if response.status_code != 200:
+            return "Case not found", "Case not found"
+        res = json.loads(response.text)
+        return res["name"], res["name_abbreviation"]
+
+    def get_cited_cases(
+            case_citation = Field(description = citation_description)
+            ) -> List[dict]:
+        """
+        Given a case citation, returns a list of cases that are cited by the opinion of this case.
+        The output is a list of cases, each a dict with the citation, name and name_abbreviation of the case.
+        """
+        volume_num, reporter, first_page = extract_components_from_citation(case_citation)
+        response = requests.get(f"https://static.case.law/{reporter}/{volume_num}/cases/{first_page:04d}-01.json")
+        if response.status_code != 200:
+            return "Case not found; please check the citation."
+        res = json.loads(response.text)
+        citations = res["cites_to"]
+        res = []
+        for citation in citations[:10]:
+            name, name_abbreviation = get_case_name(citation["cite"])
+            res.append({
+                "citation": citation["cite"],
+                "name": name,
+                "name_abbreviation": name_abbreviation
+            })
+        return res
+
+    def validate_url(
+            url = Field(description = "A web url pointing to case-law document")
+        ) -> str:
+        """
+        Given a link, returns whether or not the link is valid.
+        If it is not valid, it should not be used in any output.
+        """  
+        pdf_pattern = re.compile(r'^https://static.case.law/.*')
+        document_pattern = re.compile(r'^https://case.law/caselaw/?reporter=.*')
+        return "URL is valid" if bool(pdf_pattern.match(url)) | bool(document_pattern.match(url)) else "URL is bad"
+
+    class QueryCaselawArgs(BaseModel):
+        query: str = Field(..., description="The user query.")
+        citations: Optional[str] = Field(default = None, 
+                                         description = "The citation of the case. Optional.", 
+                                         examples = ['253 P.2d 136', '10 Alaska 11', '6 C.M.A. 3'])
+
+    vec_factory = VectaraToolFactory(vectara_api_key=cfg.api_key, 
+                                     vectara_customer_id=cfg.customer_id, 
+                                     vectara_corpus_id=cfg.corpus_id)
+    tools_factory = ToolsFactory()
+
+    ask_caselaw = vec_factory.create_rag_tool(
+        tool_name = "ask_caselaw",
+        tool_description = """
+        Returns a response (str) to the user query base on case law in the state of Alaska.
+        If 'citations' is provided, filters the response based on information from that case.
+        The response includes metadata about the case such as title/name the ruling, the court, 
+        the decision date, the judges, and the case citation. 
+        You can use case citations from the metadata as input to other tools.
+        Use this tool for general case law queries.
+        """,
+        tool_args_schema = QueryCaselawArgs,
+        reranker = "multilingual_reranker_v1", rerank_k = 100, 
+        n_sentences_before = 2, n_sentences_after = 2, lambda_val = 0.0,
+        summary_num_results = 10,
+        vectara_summarizer = 'vectara-summary-ext-24-05-med-omni',
+        include_citations = False,
+    )
+
+    return (
+        [tools_factory.create_tool(tool) for tool in [
+            get_opinion_text,
+            get_case_document_pdf,
+            get_case_document_page,
+            get_cited_cases,
+            get_case_name,
+            validate_url
+        ]] + 
+        tools_factory.standard_tools() + 
+        tools_factory.legal_tools() + 
+        tools_factory.guardrail_tools() +
+        [ask_caselaw]
+    )
+
+def get_agent_config() -> OmegaConf:
+    cfg = OmegaConf.create({
+        'customer_id': str(os.environ['VECTARA_CUSTOMER_ID']),
+        'corpus_id': str(os.environ['VECTARA_CORPUS_ID']),
+        'api_key': str(os.environ['VECTARA_API_KEY']),
+        'examples': os.environ.get('QUERY_EXAMPLES', None),
+        'demo_name': str(os.environ['DEMO_NAME']),
+        'short_description': str(os.environ['SHORT_DESCRIPTION']),
+        'extra_info': str(os.environ['EXTRA_INFO'])
+    })
+    return cfg
+
+def initialize_agent(_cfg, update_func=None):
+    
+    legal_assistant_instructions = """
+    - You are a helpful legal assistant, with expertise in case law for the state of Alaska.
+    - The ask_caselaw tool is your primary tools for finding information about cases. 
+      Do not use your own knowledge to answer questions.
+    - For a query with multiple sub-questions, break down the query into the sub-questions, 
+      and make separate calls to the ask_caselaw tool to answer each sub-question,
+      then combine the answers to provide a complete response.
+    - If the ask_caselaw tool responds that it does not have enough information to answer the query,
+      try to rephrase the query and call the tool again.
+    - When presenting the output from ask_caselaw tool,
+      Extract metadata from the tool's response, and respond in this format:
+      'On <decision date>, the <court> ruled in <case name> that <judges ruling>. This opinion was authored by <judges>'.
+    - Citations include 3 components: volume number, reporter, and first page. 
+      Here are some examples: '253 P.2d 136', '10 Alaska 11', '6 C.M.A. 3'
+      Never use your internal knowledge to contruct or guess what the citation is.
+    - If two cases have conflicting rulings, assume that the case with the more current ruling date is correct.
+    - If the response is based on cases that are older than 5 years, make sure to inform the user that the information may be outdated,
+      since some case opinions may no longer apply in law.
+    - To summarize the case, use the get_opinion_text with summarize set to True.
+    - If a user wants to learn more about a case, you can call the get_case_document_pdf tool with the citation to get a valid URL.
+      If this is unsuccessful, call the get_case_document_page tool instead. 
+      The text displayed with this URL should be the name_abbreviation of the case (DON'T just say the info can be found here).
+      Don't call the get_case_document_page tool until after you have tried the get_case_document_pdf tool.
+      Don't provide URLs from any other tools. Do not generate URLs yourself.
+    - When presenting a URL in your response, use the validate_url tool.
+    - If a user wants to test their argument, use the ask_caselaw tool to gather information about cases related to their argument 
+      and the critique_as_judge tool to determine whether their argument is sound or has issues that must be corrected.
+    - Never discuss politics, and always respond politely.
+    """
+
+    agent = Agent(
+        tools=create_assistant_tools(_cfg),
+        topic="Case law in Alaska",
+        custom_instructions=legal_assistant_instructions,
+        update_func=update_func
+    )
+
+    return agent

app.py

@@ -0,0 +1,713 @@
+import asyncio
+from markdown_it import MarkdownIt
+from mdit_py_plugins import front_matter
+
+from reactpy import component, html, hooks, use_callback, run, svg
+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("")
+
+    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):
+        if message.strip():
+            sent_message = message
+            set_message("")
+            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))
+
+
+    handle_key_down = use_callback(lambda event:
+        send_message() if event['key'] == 'Enter' else None,
+    [send_message])
+
+    handle_change = use_callback(lambda 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_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)
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="127.0.0.1", port=8000)
+
+# if __name__ == "__main__":
+#     run(App)

requirements.txt

@@ -0,0 +1,10 @@
+reactpy[starlette]==1.0.2
+uvicorn==0.30.6
+omegaconf==2.3.0
+python-dotenv==1.0.1
+uuid==1.30
+langdetect==1.0.9
+langcodes==3.4.0
+vectara-agentic==0.1.6
+markdown-it-py==3.0.0
+mdit-py-plugins==0.4.1