templates/chat.html

{% extends 'base.html' %}

{% load static %}

{% block title %}
  Chat | Devnoms
{% endblock %}

{% block style %}
  <link rel="stylesheet" href="{% static 'chat/css/chat.css' %}" />
  <script>
    // Toggle menu for three dots (Edit Profile, Settings, Logout)
    function toggleMenu() {
      const dropdown = document.getElementById('dropdown')
      dropdown.classList.toggle('show')
    }
    
    document.addEventListener('DOMContentLoaded', () => {
      // Resize functionality for setting --vh CSS variable
      window.addEventListener('resize', function () {
        document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
      })
      document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
    
      // Back button functionality
      function goBack() {
        window.history.back()
      }
    
      // Close dropdown menu when clicking outside
      document.addEventListener('click', (event) => {
        const dropdown = document.getElementById('dropdown')
        if (dropdown && !dropdown.contains(event.target) && !event.target.closest('.menu')) {
          dropdown.classList.remove('show')
        }
      })
    
      // Toggle dark mode
      const darkModeToggle = document.querySelector('.dark-mode-toggle')
      if (darkModeToggle) {
        darkModeToggle.addEventListener('click', () => {
          const theme = document.documentElement.getAttribute('data-theme')
          if (theme === 'light') {
            darkModeToggle.innerHTML = 'Light Mode'
            document.documentElement.setAttribute('data-theme', 'dark')
          } else {
            darkModeToggle.innerHTML = 'Dark Mode'
            document.documentElement.setAttribute('data-theme', 'light')
          }
        })
      }
    })
  </script>
{% endblock %}

{% block content %}
  <div class="main_box">
    <div class="chat_box">
      <!-- Header -->
      <div class="header">
        <button onclick="window.history.back();"><img src="https://pdf813.netlify.app/chat/img/icon/icons8-left-arrow-60.png" alt="Back" /></button>

        <h1>{{ friend.username }}</h1>
        <div class="menu">
          <button onclick="toggleMenu()"><img src="https://pdf813.netlify.app/chat/img/icon/icons8-menu-vertical-50.png" alt="Menu" /></button>
          <!-- Dropdown menu for Settings, Logout, and Profile -->
          <div class="dropdown-content" id="dropdown">
            <a class="username" href="{% url 'username' username=friend.username %}" onclick="overlayLoader(event)">Profile</a>
            <a href="/" onclick="overlayLoader(event)">home</a>
            <a href="/logout" onclick="overlayLoader(event)">Logout</a>
            <a href="#" class="dark-mode-toggle">Light Mode</a>
          </div>
        </div>
      </div>
      <!-- Chat Area -->
      <div class="chat-area" id="chat-area">
        {% for message in messages %}
          {% if curr_user == message.sender_name %}
            <div class="chat-message sent">
              <div class="message-text">{{ message.description }}</div>
              <div class="timestamp">{{ message.time }}</div>
            </div>
          {% else %}
            <div class="chat-message received">
              <div class="message-text">{{ message.description }}</div>
              <div class="timestamp">{{ message.time }}</div>
            </div>
          {% endif %}
        {% endfor %}
      </div>

      <!-- Input Area -->
      <form method="post" class="form-group" id="chat-box">
        <div class="input-area">
          <textarea type="text" class="message-input" placeholder="Send a message..." name="message" id="msg_field" required></textarea>
          <button type="submit" name="send" class="send-button" id="send_btn">&#x27A4;</button>
        </div>
      </form>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const chatArea = document.getElementById('chat-area')
      const messageInput = document.getElementById('msg_field')
      const sendButton = document.getElementById('send_btn')
    
      // Automatically scroll to the bottom of the chat area
      const scrollToBottom = () => {
        chatArea.scrollTop = chatArea.scrollHeight
      }
    
      // Auto-expand the textarea as the user types
      if (messageInput) {
        messageInput.addEventListener('input', () => {
          messageInput.style.height = 'auto'
          messageInput.style.height = `${messageInput.scrollHeight - 4}px`
        })
      }
    
      scrollToBottom()
    
      const currUser = '{{ curr_user.username }}'
      const roomName = '{{ relation_key }}'
      const receiver = '{{ friend.username }}'
    
      // WebSocket connection
      const chatSocket = new WebSocket((window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host + '/ws/chat/' + roomName + '/')
    
      chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data)
        const message = data.message
        const sender = data.sender
    
        // Get current time with AM/PM
        const currentTime = new Date().toLocaleTimeString([], {
          hour: '2-digit',
          minute: '2-digit',
          hour12: true // Ensures 12-hour format with AM/PM
        })
    
        const messageDiv = document.createElement('div')
        messageDiv.classList.add('chat-message', sender === currUser ? 'sent' : 'received')
    
        const textDiv = document.createElement('div')
        textDiv.classList.add('message-text')
        textDiv.innerHTML = message.replace(/\n/g, '<br>') // Replace line breaks with <br>
    
        const timestampDiv = document.createElement('div')
        timestampDiv.classList.add('timestamp')
        timestampDiv.textContent = currentTime
    
        messageDiv.appendChild(textDiv)
        messageDiv.appendChild(timestampDiv)
        chatArea.appendChild(messageDiv)
    
        scrollToBottom()
      }
    
      chatSocket.onclose = function () {
        console.error('WebSocket closed unexpectedly')
      }
    
      const chatForm = document.querySelector('#chat-box')
      if (chatForm) {
        chatForm.onsubmit = function (e) {
          e.preventDefault()
          const message = messageInput.value
    
          chatSocket.send(
            JSON.stringify({
              message: message,
              sender_name: currUser,
              receiver_name: receiver
            })
          )
          messageInput.value = ''
          messageInput.style.height = '46px'
          messageInput.focus()
        }
      }
    })
  </script>
{% endblock %}