Integrate a nicer chatting interface from learning the following document for my code:
Code:
import gradio as gr
from gradio_client import Client

# Initialize the client by pointing to the Gradio Space
client = Client("yuntian-deng/ChatGPT4")


def chat_with_model(user_input, existing_history):
    """
    Interact with the chatbot while maintaining conversation context.

    Args:
        user_input (str): User's most recent message.
        existing_history (list of tuples): [(user1, bot1), (user2, bot2), ...], conversation context.

    Returns:
        updated_history (list of tuples): Chat history after receiving the assistant's response.
    """
    chatbot_history = existing_history or []  # Initialize history if it's None
    
    if user_input.strip():  # Avoid empty input
        # Call the Gradio backend Space
        result = client.predict(
            user_input,             # User message
            1.0,                    # Top-p value for creativity
            0.7,                    # Temperature for randomness
            len(chatbot_history),   # Chat counter
            chatbot_history,        # Conversation history context
            api_name="/predict"     # API endpoint exposed from Gradio Space
        )

        # Extract updated conversation history
        updated_history = result[0]  # Gradio Space response (chat history)
        return updated_history, ""   # Reset the input box after sending
    else:
        return chatbot_history, user_input  # No input change, just return current state


def clear_chat():
    """
    Clears the chatbot history and resets the UI chat.

    Returns:
        list: An empty list to reset the chatbot UI interface.
    """
    return []  # Empty list for completely resetting chat UI


# Build Gradio App
with gr.Blocks() as app:
    gr.Markdown("## 🤖 ChatBot UI\nInteract with GPT-4 and reset the chat when needed.")

    # Chatbot UI Component
    chatbot = gr.Chatbot(label="Chatbot Conversation")

    # User Input Box
    user_input = gr.Textbox(placeholder="Enter your message...", label="Your Message")

    # Buttons
    send_button = gr.Button("Send")
    clear_button = gr.Button("Clear Chat")

    # Handle the "Send" button click
    send_button.click(
        fn=chat_with_model,
        inputs=[user_input, chatbot],  # User input and the chat history
        outputs=[chatbot, user_input]  # Update chat UI and reset input box
    )

    # Handle the "Clear Chat" button click
    clear_button.click(
        fn=clear_chat,
        inputs=[],          # No input required to clear
        outputs=[chatbot]   # Pass an empty list to reset the chat UI
    )

# Launch the app
app.launch(debug=True, server_port=80)

Document:
How to Create a Chatbot with Gradio
Introduction

Chatbots are a popular application of large language models (LLMs). Using Gradio, you can easily build a demo of your LLM and share that with your users, or try it yourself using an intuitive chatbot UI.

This tutorial uses gr.ChatInterface(), which is a high-level abstraction that allows you to create your chatbot UI fast, often with a single line of Python. It can be easily adapted to support multimodal chatbots, or chatbots that require further customization.

Prerequisites: please make sure you are using the latest version of Gradio:

$ pip install --upgrade gradio

Defining a chat function

When working with gr.ChatInterface(), the first thing you should do is define your chat function. In the simplest case, your chat function should accept two arguments: message and history (the arguments can be named anything, but must be in this order).

    message: a str representing the user's most recent message.
    history: a list of openai-style dictionaries with role and content keys, representing the previous conversation history. May also include additional keys representing message metadata.

For example, the history could look like this:

[
    {"role": "user", "content": "What is the capital of France?"},
    {"role": "assistant", "content": "Paris"}
]

Your chat function simply needs to return:

    a str value, which is the chatbot's response based on the chat history and most recent message.

Let's take a look at a few example chat functions:

Example: a chatbot that randomly responds with yes or no

Let's write a chat function that responds Yes or No randomly.

Here's our chat function:

import random

def random_response(message, history):
    return random.choice(["Yes", "No"])

Now, we can plug this into gr.ChatInterface() and call the .launch() method to create the web interface:

import gradio as gr

gr.ChatInterface(
    fn=random_response, 
    type="messages"
).launch()

Tip: Always set type="messages" in gr.ChatInterface. The default value (type="tuples") is deprecated and will be removed in a future version of Gradio.