Setting Up a Basic Chat Interface with Fiber and HTML

Setting Up the Basic Chat Interface

Welcome to the first lesson of our course on developing a chatbot web application. In this lesson, we will focus on setting up a basic chat interface using Fiber and HTML . Fiber is a web framework for Go that is designed to be fast and easy to use, making it an excellent choice for building web applications. A well-designed interface is crucial for engaging users and ensuring they can interact with the chatbot seamlessly. This lesson will guide you through creating a user-friendly web application that enhances the user experience by adding a graphical interface to make it more accessible and visually appealing.

Fiber and HTML Templates

A key feature of Fiber is its ability to serve HTML templates, which form the backbone of your application's user interface. These templates are stored in a directory and are rendered using Fiber's built-in template engine. This allows for dynamic content delivery, enabling you to create interactive and responsive web applications. Let's explore the main.go file to see how HTML pages are rendered in our Fiber application. Go package main import ("github.com/gofiber/fiber/v2" "github.com/gofiber/fiber/v2/middleware/session" "github.com/gofiber/template/html/v2") func main() {// Initialize the Fiber application with HTML template engine engine := html.New("./views", ".html") app := fiber.New(fiber.Config{Views: engine,}) // Setup session store store := session.New() // Create a new chat controller chatController := NewChatController(store) // Initialize session and render chat interface app.Get("/", func(c *fiber.Ctx) error {// Ensure user session exists chatController.EnsureUserSession(c) return c.Render("chat", fiber.Map{})}) // Run the Fiber application app.Listen(":3000")} In our application, we have transitioned from simply returning a welcome message to rendering a full HTML page. This is achieved in the root route of our main.go file. Here, we first call the EnsureUserSession method from the ChatController to manage user sessions. Then, we use Fiber's Render method to serve the chat.html file, which provides a structured and interactive chat interface for users. We use Fiber's html template engine to render simple html content as the UI. This approach not only enhances the user experience but also sets the stage for more complex interactions as we build out the chatbot's functionality.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Customer Service Chat</title>
</head>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Customer Service Chat</title>
</head>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <div class="header">
        <h1>Welcome to Our Customer Service</h1>
        <p>How can we help you today?</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <div class="header">
        <h1>Welcome to Our Customer Service</h1>
        <p>How can we help you today?</p>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your message...">
            </div>
            <button onclick="sendMessage()">Send</button>
            <button id="new-chat-btn" onclick="startNewChat()">New Chat</button>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your message...">
            </div>
            <button onclick="sendMessage()">Send</button>
            <button id="new-chat-btn" onclick="startNewChat()">New Chat</button>
        </div>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <!-- Chat container and input elements... -->
    <script>
        // JavaScript functions will be defined here
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <!-- Chat container and input elements... -->
    <script>
        // JavaScript functions will be defined here
    </script>
</body>
</html>

JavaScript

// Get references to the messages container and message input field
const messagesContainer = document.getElementById('messages');
const messageInput = document.getElementById('message-input');

// Get references to the messages container and message input field
const messagesContainer = document.getElementById('messages');
const messageInput = document.getElementById('message-input');

JavaScript

function startNewChat() {
    // Clear the chat history
    messagesContainer.innerHTML = '';
}

// Start a chat automatically when the page loads
document.addEventListener('DOMContentLoaded', startNewChat);

function startNewChat() {
    // Clear the chat history
    messagesContainer.innerHTML = '';
}

// Start a chat automatically when the page loads
document.addEventListener('DOMContentLoaded', startNewChat);

JavaScript

function appendMessage(role, content) {
    // Create a new div element for the message
    const messageDiv = document.createElement('div');
    
    // Assign a class to the message based on its role (user or assistant)
    messageDiv.className = `message ${role}`;
    
    // Set the text content of the message
    messageDiv.textContent = content;
    
    // Append the message to the messages container
    messagesContainer.appendChild(messageDiv);
    
    // Scroll the messages container to the bottom to show the latest message
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

function appendMessage(role, content) {
    // Create a new div element for the message
    const messageDiv = document.createElement('div');
    
    // Assign a class to the message based on its role (user or assistant)
    messageDiv.className = `message ${role}`;
    
    // Set the text content of the message
    messageDiv.textContent = content;
    
    // Append the message to the messages container
    messagesContainer.appendChild(messageDiv);
    
    // Scroll the messages container to the bottom to show the latest message
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

JavaScript

function sendMessage() {
    // Retrieve and trim the input value
    const message = messageInput.value.trim();
    
    // If the message is empty, do not proceed
    if (!message) return;

    // Add user message to display
    appendMessage('user', message);

    // Clear the input field after sending the message
    messageInput.value = '';

    // For now, just echo the message back
    setTimeout(() => {
        appendMessage('assistant', `You said: ${message}`);
    }, 500);
}

function sendMessage() {
    // Retrieve and trim the input value
    const message = messageInput.value.trim();
    
    // If the message is empty, do not proceed
    if (!message) return;

    // Add user message to display
    appendMessage('user', message);

    // Clear the input field after sending the message
    messageInput.value = '';

    // For now, just echo the message back
    setTimeout(() => {
        appendMessage('assistant', `You said: ${message}`);
    }, 500);
}

JavaScript

// Handle Enter key
messageInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        // Prevent the default form submission behavior
        e.preventDefault();
        // Send the message when Enter key is pressed
        sendMessage();
    }
});

// Handle Enter key
messageInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        // Prevent the default form submission behavior
        e.preventDefault();
        // Send the message when Enter key is pressed
        sendMessage();
    }
});

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Customer Service Chat</title>
</head>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <div class="header">
        <h1>Welcome to Our Customer Service</h1>
        <p>How can we help you today?</p>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your message...">
            </div>
            <button onclick="sendMessage()">Send</button>
            <button id="new-chat-btn" onclick="startNewChat()">New Chat</button>
        </div>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <!-- Chat container and input elements... -->
    <script>
        // JavaScript functions will be defined here
    </script>
</body>
</html>

JavaScript

// Get references to the messages container and message input field
const messagesContainer = document.getElementById('messages');
const messageInput = document.getElementById('message-input');

JavaScript

function startNewChat() {
    // Clear the chat history
    messagesContainer.innerHTML = '';
}

// Start a chat automatically when the page loads
document.addEventListener('DOMContentLoaded', startNewChat);

JavaScript

function appendMessage(role, content) {
    // Create a new div element for the message
    const messageDiv = document.createElement('div');
    
    // Assign a class to the message based on its role (user or assistant)
    messageDiv.className = `message ${role}`;
    
    // Set the text content of the message
    messageDiv.textContent = content;
    
    // Append the message to the messages container
    messagesContainer.appendChild(messageDiv);
    
    // Scroll the messages container to the bottom to show the latest message
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

JavaScript

function sendMessage() {
    // Retrieve and trim the input value
    const message = messageInput.value.trim();
    
    // If the message is empty, do not proceed
    if (!message) return;

    // Add user message to display
    appendMessage('user', message);

    // Clear the input field after sending the message
    messageInput.value = '';

    // For now, just echo the message back
    setTimeout(() => {
        appendMessage('assistant', `You said: ${message}`);
    }, 500);
}

JavaScript

// Handle Enter key
messageInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        // Prevent the default form submission behavior
        e.preventDefault();
        // Send the message when Enter key is pressed
        sendMessage();
    }
});

Setting Up the Basic Chat Interface

Fiber and HTML Templates

Join the 1M+ learners on CodeSignal

HTML Structure and Header

Body and Header Section

Chat Container and Input Elements

JavaScript for Interactivity

Initializing DOM Elements

StartNewChat Function

AppendMessage Function

SendMessage Function

Handling the Enter Key

Summary and Preparation for Practice