Enhancing the Chatbot Interface with Go and Fiber

Welcome back! In the previous lesson, you enhanced your chatbot application by adding message suggestions, making it more user-friendly and efficient. Today, we will focus on styling the interface to make it visually appealing and professional. Styling is crucial in web applications as it enhances user experience by providing a clean and intuitive interface. We will use CSS to achieve this, ensuring that our chatbot not only functions well but also looks great.

To begin styling our chatbot interface, we need to create a CSS file. This file will contain all the styles that define the appearance of our application. Let's create a file named style.css in the app/static directory. This directory is where we store static files like CSS, JavaScript, and images.

Here is the project structure showing the location of the style.css file:

app/
├── static/
│   └── style.css
└── views/
│   └── chat.html
└── main.go

Once the CSS file is created, we need to link it to our HTML template. Open your chat.html file and structure it as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Customer Service Chat</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <!-- Header section... -->
    <!-- Suggestion buttons for common queries -->
    <!-- Chat container and input elements... -->
    <!-- Script functions... -->
</body>
</html>

This structure includes a <link> tag within the <head> section, which contains the URL for the CSS file, ensuring that the styles are applied to the HTML elements.

Finally, we also need to setup Fiber to serve the static file from the server:

func main() {
    // Initialize the Fiber application with HTML template engine
    engine := html.New("./app/views", ".html")
    app := fiber.New(fiber.Config{
        Views: engine,
    })
    
    app.Static("/static/style.css","./app/static/style.css")

    // ... rest of the server setup ....

Now that we have our CSS file linked, let's start by styling the basic structure of our HTML elements. We'll focus on the html, body, and main container elements to set the foundation for our design.

In your style.css file, add the following styles:

/* Ensure html and body take full height and have no margin or padding */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Set body as a flex container with a column layout and a modern font */
body {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

These styles ensure that the html and body elements take up the full height of the viewport, with no margin or padding. The body is set to a flex container, allowing us to easily arrange its child elements in a column. The font-family property sets a clean and modern font for the entire application.