Integrating API Requests for Dynamic Chat Interaction in Symfony

Integrating API Requests for Dynamic Chat Interaction

Welcome back! In the previous lesson, you set up a basic chat interface using Symfony and Twig . This laid the foundation for creating a user-friendly web application. Now, we will take the next step by connecting this interface to our backend API . This connection is crucial for transforming our static interface into a dynamic, interactive chat application. By the end of this lesson, you will understand how to integrate the frontend with the backend, enabling real-time communication between the user and the server.

Connecting Twig Templates with API Endpoints

Now that we have our API endpoints set up in Symfony, we need to connect our Twig template to these endpoints. This connection allows our chat interface to communicate with the server, sending user messages and receiving responses.

Initializing Chat Variables in Twig Templates

To maintain the current user and chat state in the browser, we store both values in JavaScript variables: Twig {# templates/chat/chat.html.twig #} <script> // Initialize variables to store the current user and chat IDs let currentUserId = null; let currentChatId = null; </script> {# templates/chat/chat.html.twig #} <script> // Initialize variables to store the current user and chat IDs let currentUserId = null; let currentChatId = null; </script> These variables are populated from the API when a new chat is created. The frontend uses them when sending messages so the backend can continue the same conversation.

Understanding the Chat Template Structure

Join the 1M+ learners on CodeSignal

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

Twig

{# templates/chat/chat.html.twig #}
<script>
    // Initialize variables to store the current user and chat IDs
    let currentUserId = null;
    let currentChatId = null;
</script>

Twig

{# templates/chat/chat.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <title>Customer Service Chat</title>
</head>
<body>
    <div class="header">
        <h1>Welcome to Our Customer Service</h1>
        <p>How can we help you today?</p>
    </div>
    <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>

    <script>
        // JavaScript code will go here
    </script>
</body>
</html>

Twig

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

    // Initialize variables to store the current user and chat IDs
    let currentUserId = null;
    let currentChatId = null;

    // Start a chat automatically when the page loads
    document.addEventListener('DOMContentLoaded', startNewChat);
    
    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;
    }
</script>

Twig

<script>
    function startNewChat() {
        fetch('/api/create_chat', {
            method: 'POST',
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            currentUserId = data.user_id;
            currentChatId = data.chat_id;
            messagesContainer.innerHTML = '';
        })
        .catch(() => {
            alert('Error creating chat');
        });
    }

    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 = '';

        // Send message to API
        fetch('/api/send_message', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                user_id: currentUserId,
                chat_id: currentChatId,
                message: message
            })
        })
        .then(response => response.json())
        .then(data => {
            currentChatId = data.chat_id ?? currentChatId;
            appendMessage('assistant', data.message);
        })
        .catch(() => {
            alert('Error sending message');
        });
    }
</script>

<script>
    function startNewChat() {
        fetch('/api/create_chat', {
            method: 'POST',
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            currentUserId = data.user_id;
            currentChatId = data.chat_id;
            messagesContainer.innerHTML = '';
        })
        .catch(() => {
            alert('Error creating chat');
        });
    }

    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 = '';

        // Send message to API
        fetch('/api/send_message', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                user_id: currentUserId,
                chat_id: currentChatId,
                message: message
            })
        })
        .then(response => response.json())
        .then(data => {
            currentChatId = data.chat_id ?? currentChatId;
            appendMessage('assistant', data.message);
        })
        .catch(() => {
            alert('Error sending message');
        });
    }
</script>

text

DOMContentLoaded
  -> POST /api/create_chat
  -> store user_id and chat_id in JavaScript
  -> user submits a message
  -> POST /api/send_message
  -> keep chat_id in sync if the response returns an updated value
  -> append assistant reply to the chat

DOMContentLoaded
  -> POST /api/create_chat
  -> store user_id and chat_id in JavaScript
  -> user submits a message
  -> POST /api/send_message
  -> keep chat_id in sync if the response returns an updated value
  -> append assistant reply to the chat

Twig

<script>
    // Handle Enter key
    messageInput.addEventListener('keydown', 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();
        }
    });
</script>

<script>
    // Handle Enter key
    messageInput.addEventListener('keydown', 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();
        }
    });
</script>

Twig

<script>
    function startNewChat() {
        fetch('/api/create_chat', {
            method: 'POST',
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            currentUserId = data.user_id;
            currentChatId = data.chat_id;
            messagesContainer.innerHTML = '';
        })
        .catch(() => {
            alert('Error creating chat');
        });
    }

    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 = '';

        // Send message to API
        fetch('/api/send_message', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                user_id: currentUserId,
                chat_id: currentChatId,
                message: message
            })
        })
        .then(response => response.json())
        .then(data => {
            currentChatId = data.chat_id ?? currentChatId;
            appendMessage('assistant', data.message);
        })
        .catch(() => {
            alert('Error sending message');
        });
    }
</script>

text

DOMContentLoaded
  -> POST /api/create_chat
  -> store user_id and chat_id in JavaScript
  -> user submits a message
  -> POST /api/send_message
  -> keep chat_id in sync if the response returns an updated value
  -> append assistant reply to the chat

Twig

<script>
    // Handle Enter key
    messageInput.addEventListener('keydown', 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();
        }
    });
</script>

Integrating API Requests for Dynamic Chat Interaction

Connecting Twig Templates with API Endpoints

Initializing Chat Variables in Twig Templates

Understanding the Chat Template Structure

Join the 1M+ learners on CodeSignal

API Interaction Functions

Summary and Next Steps