"""Iteration 2: Add system & welcome prompts."""
import openai

API_KEY = "<INSERT_YOUR_KEY_HERE>"
_SYSTEM_MSG = """
You are the guide of a 'choose your own adventure'- style game: a mystical
journey through the Amazon Rainforest. Your job is to create compelling
outcomes that correspond with the player's choices. You must navigate the
player through challenges, providing choices, and consequences, dynamically
adapting the tale based on the player's inputs. Your goal is to create a
branching narrative experience where each of the player's choices leads to
a new path, ultimately determining their fate. The player's goal is to find
the lost crown of Quetzalcoatl.

Here are some rules to follow:
11. Always wait for the player to respond with their input before providing
any choices. Never provide the player's input yourself. This is most
important.
2. Ask the player to provide a name, gender and race.
3. Ask the player to choose from a selection of weapons that will be used
later in the game.
4. Have a few paths that lead to success. 
5. Have some paths that lead to death.
26. Whether or not the game results in success or death, the response must
include the text "The End...", I will search for this text to end the game.
"""

WELCOME_MSG = """
3Welcome to the Amazon Rainforest, adventurer! Your mission is to find the
lost Crown of Quetzalcoatl.
However, many challenges stand in your way. Are you brave enough, strong
enough and clever enough to overcome the perils of the jungle and secure
the crown?

Before we begin our journey, choose your name, gender and race. Choose a
weapon to bring with you. Choose wisely, as the way ahead is filled with
many dangers.
"""


def query_openai(
        prompt: str,
        api_key: str,
        sys_prompt:str = _SYSTEM_MSG,
        start_prompt:str = WELCOME_MSG,
        ) -> str:
    """Query the chat completions endpoint.

    Parameters
    ----------
    prompt: str
        The prompt to query the chat completions endpoint with.
    api_key: str
        The API key to use to query the chat completions endpoint.
    sys_prompt: str
        The system prompt to help guide the model behaviour. By default,
        the system prompt is set to _SYSTEM_MSG.
    start_prompt: str
        The start prompt which will be presented to the user as the app
        begins. By default, the start prompt is set to WELCOME_MSG.

    Returns
    -------
    str
        The response from the chat completions endpoint.
    """

    client = openai.OpenAI(api_key=api_key)
    # need to handle cases where queries go wrong.
    try:
        response = client.chat.completions.create(
            model="gpt-3.5-turbo",
4            messages=[
                {"role": "system", "content": sys_prompt},
                {"role": "assistant", "content": start_prompt},
                {"role": "user", "content": prompt},
            ]
        )
        return response.choices[0].message.content
    # in cases where the API key is invalid.
    except openai.AuthenticationError as e:
        raise ValueError(f"Is your API key valid?:\n {e}")


model_response = query_openai(
    prompt="What is the capital of the moon?",
    api_key=API_KEY
    )

"""Iteration 3: A basic user interface with no server logic."""
import openai
from shiny import App, ui

_SYSTEM_MSG = """
You are the guide of a 'choose your own adventure'- style game: a mystical
journey through the Amazon Rainforest. Your job is to create compelling
outcomes that correspond with the player's choices. You must navigate the
player through challenges, providing choices, and consequences, dynamically
adapting the tale based on the player's inputs. Your goal is to create a
branching narrative experience where each of the player's choices leads to
a new path, ultimately determining their fate. The player's goal is to find
the lost crown of Quetzalcoatl.

Here are some rules to follow:
1. Always wait for the player to respond with their input before providing
any choices. Never provide the player's input yourself. This is most
important.
2. Ask the player to provide a name, gender and race.
3. Ask the player to choose from a selection of weapons that will be used
later in the game.
4. Have a few paths that lead to success. 
5. Have some paths that lead to death.
6. Whether or not the game results in success or death, the response must
include the text "The End...", I will search for this text to end the game.
"""

WELCOME_MSG = """
Welcome to the Amazon Rainforest, adventurer! Your mission is to find the
lost Crown of Quetzalcoatl.
However, many challenges stand in your way. Are you brave enough, strong
enough and clever enough to overcome the perils of the jungle and secure
the crown?

Before we begin our journey, choose your name, gender and race. Choose a
weapon to bring with you. Choose wisely, as the way ahead is filled with
many dangers.
"""


def query_openai(
        prompt: str,
        api_key: str,
        sys_prompt:str = _SYSTEM_MSG,
        start_prompt:str = WELCOME_MSG,
        ) -> str:
    """Query the chat completions endpoint.

    Parameters
    ----------
    prompt: str
        The prompt to query the chat completions endpoint with.
    api_key: str
        The API key to use to query the chat completions endpoint.
    sys_prompt: str
        The system prompt to help guide the model behaviour. By default,
        the system prompt is set to _SYSTEM_MSG.
    start_prompt: str
        The start prompt which will be presented to the user as the app
        begins. By default, the start prompt is set to WELCOME_MSG.

    Returns
    -------
    str
        The response from the chat completions endpoint.
    """

    client = openai.OpenAI(api_key=api_key)
    # need to handle cases where queries go wrong.
    try:
        response = client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=[
                {"role": "system", "content": sys_prompt},
                {"role": "assistant", "content": start_prompt},
                {"role": "user", "content": prompt},
            ]
        )
        return response.choices[0].message.content
    # in cases where the API key is invalid.
    except openai.AuthenticationError as e:
        raise ValueError(f"Is your API key valid?:\n {e}")


# Shiny User Interface ----------------------------------------------------

1app_ui = ui.page_fillable(
    ui.panel_title("Choose Your Own Adventure: Jungle Quest!"),
2    ui.accordion(
    ui.accordion_panel("Step 1: Your OpenAI API Key",
3        ui.input_text(id="key_input", label="Enter your openai api key"),
    ), id="acc", multiple=False),
    ui.chat_ui(id="chat"),                                                  
    fillable_mobile=True,
)

4app = App(app_ui, server=None)

"""Iteration 4: Server logic allows us to create a chat log."""
import openai
from shiny import App, ui

_SYSTEM_MSG = """
You are the guide of a 'choose your own adventure'- style game: a mystical
journey through the Amazon Rainforest. Your job is to create compelling
outcomes that correspond with the player's choices. You must navigate the
player through challenges, providing choices, and consequences, dynamically
adapting the tale based on the player's inputs. Your goal is to create a
branching narrative experience where each of the player's choices leads to
a new path, ultimately determining their fate. The player's goal is to find
the lost crown of Quetzalcoatl.

Here are some rules to follow:
1. Always wait for the player to respond with their input before providing
any choices. Never provide the player's input yourself. This is most
important.
2. Ask the player to provide a name, gender and race.
3. Ask the player to choose from a selection of weapons that will be used
later in the game.
4. Have a few paths that lead to success. 
5. Have some paths that lead to death.
6. Whether or not the game results in success or death, the response must
include the text "The End...", I will search for this text to end the game.
"""

WELCOME_MSG = """
Welcome to the Amazon Rainforest, adventurer! Your mission is to find the
lost Crown of Quetzalcoatl.
However, many challenges stand in your way. Are you brave enough, strong
enough and clever enough to overcome the perils of the jungle and secure
the crown?

Before we begin our journey, choose your name, gender and race. Choose a
weapon to bring with you. Choose wisely, as the way ahead is filled with
many dangers.
"""

# compose a message stream
_SYS = {"role": "system", "content": _SYSTEM_MSG}
_WELCOME = {"role": "assistant", "content": WELCOME_MSG}
1stream = [_SYS, _WELCOME]

# Shiny User Interface ----------------------------------------------------

app_ui = ui.page_fillable(
    ui.panel_title("Choose Your Own Adventure: Jungle Quest!"),
    ui.accordion(
    ui.accordion_panel("Step 1: Your OpenAI API Key",
        ui.input_text(id="key_input", label="Enter your openai api key"),
    ), id="acc", multiple=False),
    ui.chat_ui(id="chat"),
    fillable_mobile=True,
)

# Shiny server logic ------------------------------------------------------


def server(input, output, session):
2    chat = ui.Chat(
        id="chat", messages=[ui.markdown(WELCOME_MSG)], tokenizer=None
        )
    

    # Define a callback to run when the user submits a message
    @chat.on_user_submit
3    async def respond():
        """Respond to the user's message."""
        # Get the user's input
        user = chat.user_input()
        #  update the stream list
        stream.append({"role": "user", "content": user})                    
        # Append a response to the chat
4        client = openai.AsyncOpenAI(api_key=input.key_input())
5        response = await client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=stream,
            temperature=0.7, # increase to make the model more creative
            )
        model_response = response.choices[0].message.content
        await chat.append_message(model_response)
        #  if the model indicates game over, end the game with a message.
6        if "the end..." in model_response.lower():
            await chat.append_message(
                {
                    "role": "assistant",
                    "content": "Game Over! Refresh the page to play again."
                    })
            exit()
        else:
            stream.append({"role": "assistant", "content": model_response}) 


app = App(ui=app_ui, server=server)

"""Iteration 5: Submit button & notifications for the user."""
import openai
from shiny import App, reactive, ui

_SYSTEM_MSG = """
You are the guide of a 'choose your own adventure'- style game: a mystical
journey through the Amazon Rainforest. Your job is to create compelling
outcomes that correspond with the player's choices. You must navigate the
player through challenges, providing choices, and consequences, dynamically
adapting the tale based on the player's inputs. Your goal is to create a
branching narrative experience where each of the player's choices leads to
a new path, ultimately determining their fate. The player's goal is to find
the lost crown of Quetzalcoatl.

Here are some rules to follow:
1. Always wait for the player to respond with their input before providing
any choices. Never provide the player's input yourself. This is most
important.
2. Ask the player to provide a name, gender and race.
3. Ask the player to choose from a selection of weapons that will be used
later in the game.
4. Have a few paths that lead to success. 
5. Have some paths that lead to death.
6. Whether or not the game results in success or death, the response must
include the text "The End...", I will search for this text to end the game.
"""

WELCOME_MSG = """
Welcome to the Amazon Rainforest, adventurer! Your mission is to find the
lost Crown of Quetzalcoatl.
However, many challenges stand in your way. Are you brave enough, strong
enough and clever enough to overcome the perils of the jungle and secure
the crown?

Before we begin our journey, choose your name, gender and race. Choose a
weapon to bring with you. Choose wisely, as the way ahead is filled with
many dangers.
"""

# compose a message stream
_SYS = {"role": "system", "content": _SYSTEM_MSG}
_WELCOME = {"role": "assistant", "content": WELCOME_MSG}
stream = [_SYS, _WELCOME]

# Shiny User Interface ----------------------------------------------------


1def input_text_with_button(id, label, button_label, placeholder=""):
    """
    An interface component combining an input text widget with an action
    button. IDs for the text field and button can be accessed as <id>_text
    and <id>_btn respectively.
    """
    return ui.div(
        ui.input_text(
2            id=f"{id}_text", label=label, placeholder=placeholder),
        ui.input_action_button(
            id=f"{id}_btn",
            label=button_label,
3            style="margin-top:28px;margin-bottom:16px;color:#04bb8c;border-color:#04bb8c;"
            ),
        class_="d-flex gap-2"
    )


app_ui = ui.page_fillable(
    ui.panel_title("Choose Your Own Adventure: Jungle Quest!"),
    ui.accordion(
    ui.accordion_panel("Step 1: Your OpenAI API Key",
4        input_text_with_button(
            id="key_input",
            label="Enter your OpenAI API key",
            button_label="Submit",
            placeholder="Enter key here"
            )), id="acc", multiple=False),
ui.h6("Step 2: Choose your adventure"),
    ui.chat_ui(id="chat"),
    fillable_mobile=True,
)

# Shiny server logic ------------------------------------------------------


def server(input, output, session):
    chat = ui.Chat(
        id="chat", messages=[ui.markdown(WELCOME_MSG)], tokenizer=None
        )


5    @reactive.Effect
    @reactive.event(input.key_input_btn)
    def handle_api_key_submit():
        """Update the UI with a notification when user submits key."""
        api_key = input.key_input_text()
        if api_key:
            ui.notification_show(f"API key submitted: {api_key[:5]}...")
        else:
            ui.notification_show("Please enter an API key", type="warning")


    # Define a callback to run when the user submits a message
    @chat.on_user_submit
    async def respond():
        """Respond to the user's message."""
        # Get the user's input
        user = chat.user_input()
        #  update the stream list
        stream.append({"role": "user", "content": user})
        # Append a response to the chat
        client = openai.AsyncOpenAI(api_key=input.key_input_text())
        response = await client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=stream,
            temperature=0.7, # increase to make the model more creative
            )
        model_response = response.choices[0].message.content
        await chat.append_message(model_response)
        #  if the model indicates game over, end the game with a message.
        if "the end..." in model_response.lower():
            await chat.append_message(
                {
                    "role": "assistant",
                    "content": "Game Over! Refresh the page to play again."
                    })
            exit()
        else:
            stream.append({"role": "assistant", "content": model_response})


app = App(ui=app_ui, server=server)

"""Iteration 6: Check the key is valid."""
import openai
from shiny import App, reactive, ui

_SYSTEM_MSG = """
You are the guide of a 'choose your own adventure'- style game: a mystical
journey through the Amazon Rainforest. Your job is to create compelling
outcomes that correspond with the player's choices. You must navigate the
player through challenges, providing choices, and consequences, dynamically
adapting the tale based on the player's inputs. Your goal is to create a
branching narrative experience where each of the player's choices leads to
a new path, ultimately determining their fate. The player's goal is to find
the lost crown of Quetzalcoatl.

Here are some rules to follow:
1. Always wait for the player to respond with their input before providing
any choices. Never provide the player's input yourself. This is most
important.
2. Ask the player to provide a name, gender and race.
3. Ask the player to choose from a selection of weapons that will be used
later in the game.
4. Have a few paths that lead to success. 
5. Have some paths that lead to death.
6. Whether or not the game results in success or death, the response must
include the text "The End...", I will search for this text to end the game.
"""

WELCOME_MSG = """
Welcome to the Amazon Rainforest, adventurer! Your mission is to find the
lost Crown of Quetzalcoatl.
However, many challenges stand in your way. Are you brave enough, strong
enough and clever enough to overcome the perils of the jungle and secure
the crown?

Before we begin our journey, choose your name, gender and race. Choose a
weapon to bring with you. Choose wisely, as the way ahead is filled with
many dangers.
"""

# compose a message stream
_SYS = {"role": "system", "content": _SYSTEM_MSG}
_WELCOME = {"role": "assistant", "content": WELCOME_MSG}
stream = [_SYS, _WELCOME]

# Shiny User Interface ----------------------------------------------------


def input_text_with_button(id, label, button_label, placeholder=""):
    """
    An interface component combining an input text widget with an action
    button. IDs for the text field and button can be accessed as <id>_text
    and <id>_btn respectively.
    """
    return ui.div(
        ui.input_text(
            id=f"{id}_text", label=label, placeholder=placeholder),
        ui.input_action_button(
            id=f"{id}_btn",
            label=button_label,
            style="margin-top:28px;margin-bottom:16px;color:#04bb8c;border-color:#04bb8c;"
            ),
        class_="d-flex gap-2"
    )


app_ui = ui.page_fillable(
    ui.panel_title("Choose Your Own Adventure: Jungle Quest!"),
    ui.accordion(
    ui.accordion_panel("Step 1: Your OpenAI API Key",
        input_text_with_button(
            id="key_input",
            label="Enter your OpenAI API key",
            button_label="Submit",
            placeholder="Enter key here"
            )), id="acc", multiple=False),
ui.h6("Step 2: Choose your adventure"),
    ui.chat_ui(id="chat"),
    fillable_mobile=True,
)

# Shiny server logic ------------------------------------------------------


def server(input, output, session):
    chat = ui.Chat(
        id="chat", messages=[ui.markdown(WELCOME_MSG)], tokenizer=None
        )

    @reactive.Effect
    @reactive.event(input.key_input_btn)
    async def handle_api_key_submit():
        """Update the UI with a notification when user submits key.
        
        Checks the validity of the API key by querying the models list
        endpoint."""
        api_key = input.key_input_text()
1        client = openai.AsyncOpenAI(api_key=api_key)
        try:
2            resp = await client.models.list()
            if resp:
                ui.notification_show(
                    f"API key validated: {api_key[:5]}...")
3        except openai.AuthenticationError as e:
            ui.notification_show(
                "Bad key provided. Please try again.", type="warning")


    # Define a callback to run when the user submits a message
    @chat.on_user_submit
    async def respond():
        """Respond to the user's message."""
        # Get the user's input
        user = chat.user_input()
        #  update the stream list
        stream.append({"role": "user", "content": user})
        # Append a response to the chat
        client = openai.AsyncOpenAI(api_key=input.key_input_text())
        response = await client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=stream,
            temperature=0.7, # increase to make the model more creative
            )
        model_response = response.choices[0].message.content
        await chat.append_message(model_response)
        #  if the model indicates game over, end the game with a message.
        if "the end..." in model_response.lower():
            await chat.append_message(
                {
                    "role": "assistant",
                    "content": "Game Over! Refresh the page to play again."
                    })
            exit()
        else:
            stream.append({"role": "assistant", "content": model_response})


app = App(ui=app_ui, server=server)

"""Iteration 7: Implement prompt moderation."""
import openai
from shiny import App, reactive, ui

_SYSTEM_MSG = """
You are the guide of a 'choose your own adventure'- style game: a mystical
journey through the Amazon Rainforest. Your job is to create compelling
outcomes that correspond with the player's choices. You must navigate the
player through challenges, providing choices, and consequences, dynamically
adapting the tale based on the player's inputs. Your goal is to create a
branching narrative experience where each of the player's choices leads to
a new path, ultimately determining their fate. The player's goal is to find
the lost crown of Quetzalcoatl.

Here are some rules to follow:
1. Always wait for the player to respond with their input before providing
any choices. Never provide the player's input yourself. This is most
important.
2. Ask the player to provide a name, gender and race.
3. Ask the player to choose from a selection of weapons that will be used
later in the game.
4. Have a few paths that lead to success. 
5. Have some paths that lead to death.
6. Whether or not the game results in success or death, the response must
include the text "The End...", I will search for this text to end the game.
"""

WELCOME_MSG = """
Welcome to the Amazon Rainforest, adventurer! Your mission is to find the
lost Crown of Quetzalcoatl.
However, many challenges stand in your way. Are you brave enough, strong
enough and clever enough to overcome the perils of the jungle and secure
the crown?

Before we begin our journey, choose your name, gender and race. Choose a
weapon to bring with you. Choose wisely, as the way ahead is filled with
many dangers.
"""

# compose a message stream
_SYS = {"role": "system", "content": _SYSTEM_MSG}
_WELCOME = {"role": "assistant", "content": WELCOME_MSG}
stream = [_SYS, _WELCOME]

# Shiny User Interface ----------------------------------------------------


def input_text_with_button(id, label, button_label, placeholder=""):
    """
    An interface component combining an input text widget with an action
    button. IDs for the text field and button can be accessed as <id>_text
    and <id>_btn respectively.
    """
    return ui.div(
        ui.input_text(
            id=f"{id}_text", label=label, placeholder=placeholder),
        ui.input_action_button(
            id=f"{id}_btn",
            label=button_label,
            style="margin-top:28px;margin-bottom:16px;color:#04bb8c;border-color:#04bb8c;"
            ),
        class_="d-flex gap-2"
    )


app_ui = ui.page_fillable(
    ui.panel_title("Choose Your Own Adventure: Jungle Quest!"),
    ui.accordion(
    ui.accordion_panel("Step 1: Your OpenAI API Key",
        input_text_with_button(
            id="key_input",
            label="Enter your OpenAI API key",
            button_label="Submit",
            placeholder="Enter key here"
            )), id="acc", multiple=False),
ui.h6("Step 2: Choose your adventure"),
    ui.chat_ui(id="chat"),
    fillable_mobile=True,
)

# Shiny server logic ------------------------------------------------------


def server(input, output, session):
    chat = ui.Chat(
        id="chat", messages=[ui.markdown(WELCOME_MSG)], tokenizer=None
        )


    @reactive.Effect
    @reactive.event(input.key_input_btn)
    async def handle_api_key_submit():
        """Update the UI with a notification when user submits key.
        
        Checks the validity of the API key by querying the models list
        endpoint."""
        api_key = input.key_input_text()
        client = openai.AsyncOpenAI(api_key=api_key)
        try:
            resp = await client.models.list()
            if resp:
                ui.notification_show(
                    f"API key validated: {api_key[:5]}...")
        except openai.AuthenticationError as e:
            ui.notification_show(
                "Bad key provided. Please try again.", type="warning")
    

1    async def check_moderation(prompt:str) -> str:
        """Check if prompt is flagged by OpenAI's moderation endpoint.

        Parameters
        ----------
        prompt : str
            The user's prompt to check.

        Returns
        -------
        str
            The category violations if flagged, otherwise "good prompt".
        """
2        client = openai.AsyncOpenAI(api_key=input.key_input_text())
        response = await client.moderations.create(
            input=prompt)
        content = response.results[0].to_dict()
3        if content["flagged"]:
            infringements = []
            for key, val in content["categories"].items():
                if val:
                    infringements.append(key)
4            return " & ".join(infringements)
        else:
5            return "good prompt"


    # Define a callback to run when the user submits a message
    @chat.on_user_submit
    async def respond():
        """Respond to the user's message."""
        # Get the user's input
        usr_prompt = chat.user_input()

        # Check moderations endpoint incase openai policies are violated
        flag_check = await check_moderation(prompt=usr_prompt)
6        if flag_check != "good prompt":
            await chat.append_message({
                "role": "assistant",
                "content": f"Your message may violate OpenAI's usage policy, categories: {flag_check}. Please rephrase your input and try again."
            })
        else:
            #  update the stream list
            stream.append({"role": "user", "content": usr_prompt})
            # Append a response to the chat
            client = openai.AsyncOpenAI(api_key=input.key_input_text())
            response = await client.chat.completions.create(
                model="gpt-3.5-turbo",
                messages=stream,
                temperature=0.7, # increase to make the model more creative
                )
            model_response = response.choices[0].message.content
            await chat.append_message(model_response)
            #  if the model indicates game over, end game with a message.
            if "the end..." in model_response.lower():
                await chat.append_message(
                    {
                        "role": "assistant",
                        "content": "Game Over! Refresh to play again."
                        })
                exit()
            else:
                stream.append(
                    {"role": "assistant", "content": model_response})


app = App(ui=app_ui, server=server)

"""Iteration 8: Refactor OpenAI client instantiation."""
import openai
from shiny import App, reactive, ui

_SYSTEM_MSG = """
You are the guide of a 'choose your own adventure'- style game: a mystical
journey through the Amazon Rainforest. Your job is to create compelling
outcomes that correspond with the player's choices. You must navigate the
player through challenges, providing choices, and consequences, dynamically
adapting the tale based on the player's inputs. Your goal is to create a
branching narrative experience where each of the player's choices leads to
a new path, ultimately determining their fate. The player's goal is to find
the lost crown of Quetzalcoatl.

Here are some rules to follow:
1. Always wait for the player to respond with their input before providing
any choices. Never provide the player's input yourself. This is most
important.
2. Ask the player to provide a name, gender and race.
3. Ask the player to choose from a selection of weapons that will be used
later in the game.
4. Have a few paths that lead to success. 
5. Have some paths that lead to death.
6. Whether or not the game results in success or death, the response must
include the text "The End...", I will search for this text to end the game.
"""

WELCOME_MSG = """
Welcome to the Amazon Rainforest, adventurer! Your mission is to find the
lost Crown of Quetzalcoatl.
However, many challenges stand in your way. Are you brave enough, strong
enough and clever enough to overcome the perils of the jungle and secure
the crown?

Before we begin our journey, choose your name, gender and race. Choose a
weapon to bring with you. Choose wisely, as the way ahead is filled with
many dangers.
"""

# compose a message stream
_SYS = {"role": "system", "content": _SYSTEM_MSG}
_WELCOME = {"role": "assistant", "content": WELCOME_MSG}
stream = [_SYS, _WELCOME]

# Shiny User Interface ----------------------------------------------------


def input_text_with_button(id, label, button_label, placeholder=""):
    """
    An interface component combining an input text widget with an action
    button. IDs for the text field and button can be accessed as <id>_text
    and <id>_btn respectively.
    """
    return ui.div(
        ui.input_text(
            id=f"{id}_text", label=label, placeholder=placeholder),
        ui.input_action_button(
            id=f"{id}_btn",
            label=button_label,
            style="margin-top:28px;margin-bottom:16px;color:#04bb8c;border-color:#04bb8c;"
            ),
        class_="d-flex gap-2"
    )


app_ui = ui.page_fillable(
    ui.panel_title("Choose Your Own Adventure: Jungle Quest!"),
    ui.accordion(
    ui.accordion_panel("Step 1: Your OpenAI API Key",
        input_text_with_button(
            id="key_input",
            label="Enter your OpenAI API key",
            button_label="Submit",
            placeholder="Enter key here"
            )), id="acc", multiple=False),
ui.h6("Step 2: Choose your adventure"),
    ui.chat_ui(id="chat"),
    fillable_mobile=True,
)

# Shiny server logic ------------------------------------------------------


def server(input, output, session):
    chat = ui.Chat(
        id="chat", messages=[ui.markdown(WELCOME_MSG)], tokenizer=None
        )
    #  define a reactive value that will store the openai client
1    openai_client = reactive.Value(None)


    @reactive.Effect
    @reactive.event(input.key_input_btn)
    async def handle_api_key_submit():
        """Update the UI with a notification when user submits key.
        
        Checks the validity of the API key by querying the models list
        endpoint."""
        api_key = input.key_input_text()
        client = openai.AsyncOpenAI(api_key=api_key)
        try:
            resp = await client.models.list()
            if resp:
2                openai_client.set(client)
                ui.notification_show(
                    f"API key validated: {api_key[:5]}...")
        except openai.AuthenticationError as e:
            ui.notification_show(
                "Bad key provided. Please try again.", type="warning")
    

    async def check_moderation(
            prompt:str, reactive_client:reactive.Value
            ) -> str:
        """Check if prompt is flagged by OpenAI's moderation endpoint.

        Parameters
        ----------
        prompt : str
            The user's prompt to check.
        reactive_client : reactive.Value
            A reactive value that stores the openai client.

        Returns
        -------
        str
            The category violations if flagged, otherwise "good prompt".
        """
        client = reactive_client.get()
        response = await client.moderations.create(
            input=prompt)
        content = response.results[0].to_dict()
        if content["flagged"]:
            infringements = []
            for key, val in content["categories"].items():
                if val:
                    infringements.append(key)
            return " & ".join(infringements)
        else:
            return "good prompt"
    

    # Define a callback to run when the user submits a message
    @chat.on_user_submit
    async def respond():
        """Respond to the user's message."""
        # Get the user's input
        usr_prompt = chat.user_input()

        # Check moderations endpoint incase openai policies are violated
        flag_check = await check_moderation(
3            prompt=usr_prompt, reactive_client=openai_client)
        if flag_check != "good prompt":
            await chat.append_message({
                "role": "assistant",
                "content": f"Your message may violate OpenAI's usage policy, categories: {flag_check}. Please rephrase your input and try again."
            })
        else:
            #  update the stream list
            stream.append({"role": "user", "content": usr_prompt})
            # Append a response to the chat
4            response = await openai_client.get().chat.completions.create(
                model="gpt-3.5-turbo",
                messages=stream,
                temperature=0.7, # increase to make the model more creative
                )
            model_response = response.choices[0].message.content
            await chat.append_message(model_response)
            #  if the model indicates game over, end game with a message.
            if "the end..." in model_response.lower():
                await chat.append_message(
                    {
                        "role": "assistant",
                        "content": "Game Over! Refresh to play again."
                        })
                exit()
            else:
                stream.append(
                    {"role": "assistant", "content": model_response})


app = App(ui=app_ui, server=server)

"""Iteration 9: Styling."""
import openai
from shiny import App, reactive, ui
1from shinyswatch import theme

_SYSTEM_MSG = """
You are the guide of a 'choose your own adventure'- style game: a mystical
journey through the Amazon Rainforest. Your job is to create compelling
outcomes that correspond with the player's choices. You must navigate the
player through challenges, providing choices, and consequences, dynamically
adapting the tale based on the player's inputs. Your goal is to create a
branching narrative experience where each of the player's choices leads to
a new path, ultimately determining their fate. The player's goal is to find
the lost crown of Quetzalcoatl.

Here are some rules to follow:
1. Always wait for the player to respond with their input before providing
any choices. Never provide the player's input yourself. This is most
important.
2. Ask the player to provide a name, gender and race.
3. Ask the player to choose from a selection of weapons that will be used
later in the game.
4. Have a few paths that lead to success. 
5. Have some paths that lead to death.
6. Whether or not the game results in success or death, the response must
include the text "The End...", I will search for this text to end the game.
"""

WELCOME_MSG = """
Welcome to the Amazon Rainforest, adventurer! Your mission is to find the
lost Crown of Quetzalcoatl:\n
2<div style="display: grid; place-items: center;"><img src="https://raw.githubusercontent.com/r-leyshon/adventure-app/main/www/crown.jpeg" width=60%/></div>\n
However, many challenges stand in your way. Are you brave enough, strong
enough and clever enough to overcome the perils of the jungle and secure
the crown?

Before we begin our journey, choose your name, gender and race. Choose a
weapon to bring with you. Choose wisely, as the way ahead is filled with
many dangers.
"""

# compose a message stream
_SYS = {"role": "system", "content": _SYSTEM_MSG}
_WELCOME = {"role": "assistant", "content": WELCOME_MSG}
stream = [_SYS, _WELCOME]

# Shiny User Interface ----------------------------------------------------


def input_text_with_button(id, label, button_label, placeholder=""):
    """
    An interface component combining an input text widget with an action
    button. IDs for the text field and button can be accessed as <id>_text
    and <id>_btn respectively.
    """
    return ui.div(
        ui.input_text(
            id=f"{id}_text", label=label, placeholder=placeholder),
        ui.input_action_button(
            id=f"{id}_btn",
            label=button_label,
            style="margin-top:32px;margin-bottom:16px;color:#04bb8c;border-color:#04bb8c;"
            ),
        class_="d-flex gap-2"
    )


app_ui = ui.page_fillable(
    ui.panel_title("Choose Your Own Adventure: Jungle Quest!"),
    ui.accordion(
    ui.accordion_panel("Step 1: Your OpenAI API Key",
        input_text_with_button(
            id="key_input",
            label="Enter your OpenAI API key",
            button_label="Submit",
            placeholder="Enter key here"
            )), id="acc", multiple=False),
ui.h6("Step 2: Choose your adventure"),
    ui.chat_ui(id="chat"),
    fillable_mobile=True,
3    theme=theme.darkly,
)

# Shiny server logic ------------------------------------------------------


def server(input, output, session):
    chat = ui.Chat(
        id="chat", messages=[ui.markdown(WELCOME_MSG)], tokenizer=None
        )
    #  define a reactive value that will store the openai client
    openai_client = reactive.Value(None)


    @reactive.Effect
    @reactive.event(input.key_input_btn)
    async def handle_api_key_submit():
        """Update the UI with a notification when user submits key.
        
        Checks the validity of the API key by querying the models list
        endpoint."""
        api_key = input.key_input_text()
        client = openai.AsyncOpenAI(api_key=api_key)
        try:
            resp = await client.models.list()
            if resp:
                openai_client.set(client)
                ui.notification_show(
                    f"API key validated: {api_key[:5]}...")
        except openai.AuthenticationError as e:
            ui.notification_show(
                "Bad key provided. Please try again.", type="warning")
    

    async def check_moderation(
            prompt:str, reactive_client:reactive.Value
            ) -> str:
        """Check if prompt is flagged by OpenAI's moderation endpoint.

        Parameters
        ----------
        prompt : str
            The user's prompt to check.
        reactive_client : reactive.Value
            A reactive value that stores the openai client.

        Returns
        -------
        str
            The category violations if flagged, otherwise "good prompt".
        """
        client = reactive_client.get()
        response = await client.moderations.create(
            input=prompt)
        content = response.results[0].to_dict()
        if content["flagged"]:
            infringements = []
            for key, val in content["categories"].items():
                if val:
                    infringements.append(key)
            return " & ".join(infringements)
        else:
            return "good prompt"
    

    # Define a callback to run when the user submits a message
    @chat.on_user_submit
    async def respond():
        """Respond to the user's message.
        
        First check that OpenAI's usage policies are not moderated. If this
        passes, then respond with a message from the model. If the model
        has ended the game, then exit the game."""
        # Get the user's input
        usr_prompt = chat.user_input()

        # Check moderations endpoint incase openai policies are violated
        flag_check = await check_moderation(
            prompt=usr_prompt, reactive_client=openai_client)
        if flag_check != "good prompt":
            await chat.append_message({
                "role": "assistant",
                "content": f"Your message may violate OpenAI's usage policy, categories: {flag_check}. Please rephrase your input and try again."
            })
        else:
            #  update the stream list
            stream.append({"role": "user", "content": usr_prompt})
            # Append a response to the chat
            response = await openai_client.get().chat.completions.create(
                model="gpt-3.5-turbo",
                messages=stream,
                temperature=0.7, # increase to make the model more creative
                )
            model_response = response.choices[0].message.content
            await chat.append_message(model_response)
            #  if the model indicates game over, end game with a message.
            if "the end..." in model_response.lower():
                await chat.append_message(
                    {
                        "role": "assistant",
                        "content": "Game Over! Refresh to play again."
                        })
                exit()
            else:
                stream.append(
                    {"role": "assistant", "content": model_response})


app = App(ui=app_ui, server=server)