Building a Vaadin & Gemini AI-Powered Chatbot | Part 2

Welcome to part two of our series on building an AI-powered chatbot using Vaadin and Google's Gemini AI 1.5 model. In this post, we’ll enhance the basic Gemini AI chatbot from part one with advanced features like context management, a customized UI with Vaadin components, and an improved user experience. By the end of this tutorial, your Gemini AI-powered chatbot will support scrollable chat history, boast an enhanced design, and allow you to clear conversations with a single click.

Prerequisites

If you haven't already, make sure you've completed part one of this series, where we set up the basic chatbot. You'll need the initial working chatbot code from part one and a basic understanding of the Vaadin Flow framework and Java.

Setting up context management

True context management in an AI system facilitates access to prior prompts and responses for use in future ones. Essentially, remembering a conversation history. Currently, our chatbot displays a new response for each prompt, erasing the prior responses from view. We can achieve context management for the user by storing the conversation history in a VerticalLayout component called chatMessages. This layout acts as a container for the user prompts and AI responses, displaying them sequentially as the conversation progresses.

private final VerticalLayout chatMessages = new VerticalLayout();

Implementing scrollable chat history

To further improve usability, we introduced a Scroller component that wraps around the chatMessages layout. The Scroller is set to a fixed height of 400px and configured for vertical scrolling to help users navigate the chat history even as it grows. This feature is particularly beneficial for applications where users might need to refer back to earlier parts of the conversation without losing sight of the latest interactions.

Scroller chatHistoryScroller = new Scroller(chatMessages);
chatHistoryScroller.setHeight("400px");
        chatHistoryScroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);

Adding a Clear Chat button

Finally, we also added a ClearChat button. When clicked, this button clears the entire chat history, allowing users to start a fresh conversation without needing to refresh the page. This feature is especially useful when users want to reset the context after a lengthy or complex conversation. Since chatMessages is a verticalLayout component, we use one of its methods, removeAll, to clear the history. There is also an option to remove a single component, but that is not suitable for our use case. Now, with just a single click, the user can wipe the slate clean and begin anew, making the chatbot more adaptable to various use cases.

private final Button clearChat = new Button("Clear Chat");
clearChat.addClickListener(e -> chatMessages.removeAll());

Giving our UI some style

To make our chatbot interface more visually appealing, we’ve added some simple CSS styling. It’s good to remember that while Flow is 100% Java, what is viewed in the browser is still rendered HTML and can be styled with Vaadin’s in-house tools and traditional CSS.

The input field, implemented as a TextField, now spans the full width of the available space. The buttons and chat bubbles have been given styling to separate the prompt from the response and improve the overall look of our chatbot. Our chatbot UI is now functional and visually engaging with minimal coding on the programmer’s side. Check out the complete vanilla CSS file on GitHub.

Here's the final result:

Screenshot of phone screen with ongoing chat with AI chatbot.

Summary

In this second part of our series, we've significantly improved the functionality and usability of our AI chatbot. We’ve added context management, customized the UI with Vaadin components, implemented a scrollable chat history, and included a Clear Chat button. These improvements make the chatbot more functional, user-friendly, and visually appealing, showcasing the power of Vaadin in building sophisticated web applications.

To continue learning about Vaadin Flow and Spring AI, as well as the complete code referenced in this blog, check out the resources below:

Building a Vaadin & Gemini AI chatbot: Context management and UI customization