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> 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

API Interaction Functions

The following functions interact with our Symfony backend API:

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>

The request flow in this lesson looks like this:

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

Note: These examples use JSON POST requests tied to the current session. For this demo, we keep the frontend simple and do not add CSRF protection. In a production application, you should protect these endpoints with CSRF tokens or an equivalent mitigation strategy.

These functions handle the core API interactions for our chat application:

startNewChat: This function initiates a new chat session by making a POST request to our Symfony controller. When the API responds, it stores both the returned user ID and chat ID, then clears the message display so the interface is ready for a fresh conversation. We also send same-origin credentials with our requests so the session cookie is consistently included.
sendMessage: This function is the heart of our chat interaction. It captures the user's input, displays it in the chat, and sends a JSON request containing the current user ID, chat ID, and message. When the API responds, it displays the assistant's response and keeps the chat ID in sync if the backend returns an updated value. For user input handling, we add an event listener for the Enter key:

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>

This event listener enhances the user experience by allowing messages to be sent with the Enter key. It prevents the default form submission behavior and calls our sendMessage function, making the chat interface more intuitive and user-friendly.

Integrating API Requests for Dynamic Chat Interaction in Symfony