import solara
from typing import List
from typing_extensions import TypedDict

class MessageDict(TypedDict):
    role: str
    content: str

messages: solara.Reactive[List[MessageDict]] = solara.reactive([])
@solara.component
def Page():
    with solara.Column(style={"padding": "30px"}):
        solara.Title("EchoBot")
        solara.Markdown("#EchoBot")
        user_message_count = len([m for m in messages.value if m["role"] == "user"])
    
        def send(message):
            messages.value = [
                *messages.value,
                {"role": "user", "content": message},
            ]
    
        def response(message):
            messages.value = [
                *messages.value,
                {"role": "assistant", "content": message}
            ]
    
        def result():
            if messages.value !=[]: response(messages.value[-1]["content"])
    
        result = solara.use_memo(result, [user_message_count])
    
        print(messages.value)
    
        with solara.Column(style={"width": "70%"}):
            with solara.lab.ChatBox():
                for item in messages.value:
                    with solara.lab.ChatMessage(
                        user=item["role"] == "user",
                        name="Echobot" if item["role"] == "assistant" else "User",
                        avatar_background_color="#33cccc" if item["role"] == "assistant" else "#ff991f",
                        border_radius="20px",
                    ):
                        solara.Markdown(item["content"])
            solara.lab.ChatInput(send_callback=send)