How to retain chat history when you leave at the page

[mtanco]

This code is an H2O Wave application that creates a simple web interface with two interactive tabs: a chatbot and a static welcome page. The app showcases how to retain chat history within a session and switch between two views using tab navigation.

Key Components:

1. Chatbot Functionality: The application stores and displays a chat conversation between the user and a bot.

2. Tab Navigation: The app provides a simple UI with two tabs—"Chat" and "Other." The "Chat" tab displays the chatbot interface, while the "Other" tab shows a welcome message.

3. Session Management: The application retains chat history using session variables (q.client.chatbot_history), ensuring that the conversation persists as the user interacts with the app.

4. Dynamic Page Rendering: It dynamically clears and updates UI components (referred to as "cards") based on user interaction, ensuring that only relevant content is displayed at any given time.

This code is a demo of how to maintain state, build interactive components, and manage dynamic user interfaces using the H2O Wave framework.

from h2o_wave import main, app, Q, ui, run_on, on, data


@app('/')
async def serve(q: Q):

    if not q.client.initialized:  # runs the first time this browser tab visits the app
        q.client.chatbot_history = [['Welcome', False], ]  # where we save the chatbot history
        q.client.active_cards = []  # where we save what page the user is on

        # Layout for the full application
        q.page["meta"] = ui.meta_card(
            box="",
            layouts=[ui.layout(breakpoint="xs", max_width="900px", zones=[
                ui.zone(name="header", size="0"),
                ui.zone(name="body")
            ])]
        )

        # Header used for the application
        q.page["header_card"] = ui.header_card(
            box="header",
            title="Demo",
            subtitle="How to retain your chat history",
            items=[
                ui.tabs(name="nav", items=[
                    ui.tab("chat", "Chat"),
                    ui.tab("other", "Other")
                ])
            ]
        )

        # Call the chat function to load the chatbot interface when the user starts the app
        await chat(q)

        # Mark the client as initialized to avoid reinitialization
        q.client.initialized = True

    # Await execution of any event-driven function
    await run_on(q)

    # Save the page state
    await q.page.save()


# Define a handler for the "chat" tab navigation
@on("nav", lambda x: x == "chat")
async def chat(q: Q):
    # Clear any active cards on the page before adding new ones
    clear_active_cards(q)

    # Create a chatbot card that displays the chatbot conversation history
    q.page["chatbot_card"] = ui.chatbot_card(
        box="body",
        name="chatbot",
        data=data(fields='content from_user', t='list', rows=q.client.chatbot_history),
    )

    # Add the chatbot card to the list of active cards
    q.client.active_cards.append("chatbot_card")


# Define a handler for chatbot interaction when user submits text
@on()
async def chatbot(q: Q):
    # Append the user's input to the chatbot history
    q.client.chatbot_history.append([q.args.chatbot, True])

    # Update the chatbot card UI with the user's input
    q.page["chatbot_card"].data += [q.args.chatbot, True]

    # Append a fake response from the chatbot to the history
    q.client.chatbot_history.append(["Sorry, I am fake", False])

    # Update the chatbot card with the fake response
    q.page["chatbot_card"].data += ["Sorry, I am fake", False]


# Define a handler for the "other" tab navigation
@on("nav", lambda x: x == "other")
async def other(q: Q):
    # Clear any active cards on the page before adding new ones
    clear_active_cards(q)

    # Create a simple form card with a welcome message
    q.page["other_card"] = ui.form_card(
        box="body",
        items=[
            ui.text_xl("Welcome")
        ]
    )

    # Add the other card to the list of active cards
    q.client.active_cards.append("other_card")


# Helper function to clear all active cards from the page
def clear_active_cards(q: Q):
    for card in q.client.active_cards:
        # Remove each active card from the page
        del q.page[card]

    # Reset the list of active cards
    q.client.active_cards = []