chatbox tutorial!

hi everyone! i've gotten a few requests to make a tutorial for my chatbox, so here it is!

i coded this chatbox instead of using a service like cbox so i could have full control over the design and functionality.

the current functions of this chatbox are:
real time messaging
ability to link a website to a username
150 character limit for messages
emoji picker and ability to use emoji codes in the message input box
timestamps
clickable links within messages
load older messages button (loads batches of 20 messages at a time)

this project uses html, css, javascript, and a database server.

before we begin, you will need to create a "chat.js" file in your neocities website dashboard. copy the following into the file:

import DOMPurify from 'https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.es.js';
console.log("DOMPurify type:", typeof DOMPurify);

import { initializeApp } from 'https://www.gstatic.com/firebasejs/11.3.1/firebase-app.js';
import { 
    getDatabase, 
    ref, 
    push, 
    onChildAdded, 
    serverTimestamp,
    query,
    orderByChild,
    limitToLast,
    endBefore,
    startAt,
    get
} from 'https://www.gstatic.com/firebasejs/11.3.1/firebase-database.js';
import { getAuth, signInAnonymously } from 'https://www.gstatic.com/firebasejs/11.3.1/firebase-auth.js';

// firebase configuration



// firebase initialization
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth(app);


signInAnonymously(auth)
  .then(() => {
    console.log("Signed in anonymously");
  })
  .catch((error) => {
    console.error("Anonymous sign-in failed:", error);
  });


const INITIAL_LOAD_LIMIT = 20; 
const LOAD_MORE_LIMIT = 15;    
const chatMessages = document.getElementById("chat-messages");
const chatContainer = document.getElementById("chat-container");
const messagesRef = ref(db, "messages");

let oldestLoadedKey = null; 
let loadingMessages = false;
const loadedMessageKeys = new Set(); 

console.log('Firebase App Initialized:', app);
console.log('Database Reference:', db);

// username stuff
let username = (localStorage.getItem('chatUsername') || '').trim();

let website = (localStorage.getItem('chatWebsite') || '').trim();
const websiteInput = document.getElementById('website-input');

const usernameInput = document.getElementById('username-input');
const usernameContainer = document.getElementById('username-container');

document.getElementById('set-username-btn').addEventListener('click', setUsername);

function setUsername() {
    const newUsername = usernameInput.value.trim().substring(0, 15);
    if (!/^[a-zA-Z0-9_\- ]{2,15}$/.test(newUsername)) {
        alert('Username must be 2-15 characters, no special characters');
        return;
    }
    console.log('Setting username:', newUsername);

    if (newUsername.length > 0) {
         username = newUsername;
        let rawWebsite = websiteInput.value.trim();
if (rawWebsite && !/^https?:\/\//i.test(rawWebsite)) {
  rawWebsite = 'https://' + rawWebsite;
}
website = rawWebsite;
        localStorage.setItem('chatUsername', username);
        localStorage.setItem('chatWebsite', website);
        console.log('Username set to:', username);
        usernameInput.value = '';
        usernameContainer.classList.add('show-welcome');
        document.getElementById('display-username').textContent = username;
    } else {
        console.log('Invalid username attempt');
        alert('Please enter a valid username!');
        usernameInput.focus();
    }
}

function sanitize(text) {
  return DOMPurify.sanitize(text, {
    ALLOWED_TAGS: ['a', 'img', 'strong'],
    ALLOWED_ATTR: ['href', 'target', 'rel', 'src', 'alt', 'class'],
    ALLOWED_URI_REGEXP: /^(https?|ftp|mailto):/i
  });
}

function createMessageElement(messageData) {
  const li = document.createElement("li");
  li.className = "message";

  const timestamp = new Date(messageData.timestamp).toLocaleTimeString([], {
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
  li.innerHTML = `
    <div class="message-header">
     <span class="username">
  ${messageData.website 
    ? `<a href="${sanitize(messageData.website)}" target="_blank" rel="noopener noreferrer">${sanitize(messageData.username || 'Anonymous')}</a>`
    : sanitize(messageData.username || 'Anonymous')}
</span>
      <span class="timestamp">${timestamp}</span>
    </div>
    <div class="message-text">${convertEmotes(messageData.message)}</div>
  `;

  return li;
}

async function loadMessages(loadOlder = false) {
  if (loadingMessages) return;
  loadingMessages = true;

  let q;
  if (loadOlder && oldestLoadedKey) {
    q = query(messagesRef, 
      orderByChild('timestamp'),
      endBefore(oldestLoadedKey),
      limitToLast(LOAD_MORE_LIMIT)
    );
  } else {
    q = query(messagesRef, 
      orderByChild('timestamp'),
      limitToLast(INITIAL_LOAD_LIMIT)
    );
  }

  try {
    const snapshot = await get(q);
    const messages = [];

    snapshot.forEach((childSnapshot) => {
      const message = {
        key: childSnapshot.key,
        ...childSnapshot.val()
      };

      if (!loadedMessageKeys.has(message.key)) {
        messages.push(message);
        loadedMessageKeys.add(message.key); 
      }
    });

    console.log("Fetched messages:", messages.length);

    if (messages.length > 0) {
      oldestLoadedKey = messages[0].timestamp; 
    }

    if (loadOlder) {
      // prepend older messages to top
      messages.reverse().forEach(message => {
        const li = createMessageElement(message);
        chatMessages.insertBefore(li, chatMessages.firstChild);
      });
    } else {
      // append initial messages to bottom
      messages.forEach(message => {
        const li = createMessageElement(message);
        chatMessages.appendChild(li);
      });
      scrollToBottom();

      const latestLoadedTimestamp = messages[messages.length - 1].timestamp;
      subscribeToNewMessages(latestLoadedTimestamp);
    }

  } catch (error) {
    console.error("Error loading messages:", error);
  } finally {
    loadingMessages = false;
  }
}

function subscribeToNewMessages(latestTimestamp) {
    const newMessagesQuery = query(
        messagesRef,
        orderByChild('timestamp'),
        startAt(latestTimestamp + 1)
    );
    onChildAdded(newMessagesQuery, (snapshot) => {
        const message = snapshot.val();
        if (!loadedMessageKeys.has(snapshot.key)) {
            const li = createMessageElement({ ...message, key: snapshot.key });
            chatMessages.appendChild(li);
            loadedMessageKeys.add(snapshot.key);
            scrollToBottom();
        }
    });
}


document.getElementById('load-older-button').addEventListener('click', () => {
  if (!loadingMessages) {
    loadMessages(true);
  }
});

const emojiMap = {};

document.addEventListener('DOMContentLoaded', () => {
  const emojiPicker = document.getElementById('emoji-picker');

  fetch('emoji-picker.html')
    .then(res => res.text())
    .then(html => {
      emojiPicker.innerHTML = html;

      // Register emoji codes into emojiMap
      document.querySelectorAll('#emoji-picker .emoji').forEach(btn => {
        const code = btn.dataset.code;
        const img = btn.querySelector('img');
        if (code && img && img.src) {
          emojiMap[code] = img.src;
        }

        // Setup click to insert emoji code
        btn.addEventListener('click', (e) => {
          e.preventDefault();
          const chatInput = document.getElementById("chat-input");
          chatInput.value += code;
          emojiPicker.classList.remove('active');
          chatInput.focus();
        });
      });
    })
    .catch(err => {
      console.error("Failed to load emoji picker:", err);
    });
});

const escapeRegExp = (string) => {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};

const convertEmotes = (text) => {
  const safeText = sanitize(text);
  const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;


  const withLinks = safeText.replace(urlRegex, url => {
    return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
  });

 
const withMentions = withLinks.replace(/@(\w+)/g, '<strong>@$1</strong>'
);


  const emojiCodes = Object.keys(emojiMap).sort((a, b) => b.length - a.length);
  return emojiCodes.reduce((result, code) => {
    const pattern = new RegExp(escapeRegExp(code), 'g');
    const url = emojiMap[code];
    return result.replace(pattern, `<img src="${url}" class="emoticon" alt="${code}">`);
  }, withMentions);
};

// initial page load check
if (username) {
    document.getElementById('display-username').textContent = username;
    usernameContainer.classList.add('show-welcome');
} else {
    usernameContainer.classList.remove('show-welcome');
}

// send message stuff
document.getElementById("send-button").addEventListener("click", function() {
    if (!username) {
        alert('Please set a username first!');
        return;
    }

    const inputField = document.getElementById("chat-input");
    const messageText = inputField.value.trim();
    if (messageText.length > 150) {
        alert('Message too long!');
        return;
    }

    if (messageText) {
        push(messagesRef, {
            username: username,
            website: website,
            message: messageText,
            timestamp: serverTimestamp()
        });
        inputField.value = "";
    }
});

function scrollToBottom() {
    chatContainer.scrollTo({
        top: chatContainer.scrollHeight,
    });
}

loadMessages();

// emoji picker
document.addEventListener('DOMContentLoaded', () => {
  const emojiButton = document.getElementById('emoji-button');
  const emojiPicker = document.getElementById('emoji-picker');
  const chatInput = document.getElementById('chat-input');
  const charCounter = document.getElementById('char-counter');

  // toggle picker
  emojiButton.addEventListener('click', (e) => {
    e.stopPropagation();
    emojiPicker.classList.toggle('active');
  });

  // insert emoji code
  document.querySelectorAll('#emoji-picker button.emoji').forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.preventDefault();
      const code = btn.dataset.code;
      chatInput.value += code;
      emojiPicker.classList.remove('active');
      chatInput.focus();
    });
  });

  // close picker when clicking outside
  document.addEventListener('click', (e) => {
    if (!emojiPicker.contains(e.target) && e.target !== emojiButton) {
      emojiPicker.classList.remove('active');
    }
  });

  // enter key for sending messages
  chatInput.addEventListener('keydown', function(event) {
    if (event.key === "Enter" && event.ctrlKey) {
      event.preventDefault();
      document.getElementById("send-button").click();
    }
  });

  // character counter
  chatInput.addEventListener('input', () => {
    const currentLength = chatInput.value.length;
    charCounter.textContent = `${currentLength}/150`;
    charCounter.classList.toggle('over-limit', currentLength > 150);
  });
});

we will be using firebase for this chatbox, as it is the easiest and most hassle-free real-time database server. firebase lets you store your messages in the cloud, update all users instantly, and avoid having to use php. the free tier (called spark) for firebase includes:

1 gb storage

50k reads/day

20k writes/day

the 1 gb storage cap is enough for low traffic static sites like neocities or nekoweb as it allows around 2-4 million messages, depending on the size of the message. after you hit the 1 gb cap, messages will no longer write until you upgrade your firebase plan ($5 per gb added). if you have a LOT of traffic on your site and have a very very active chatbox and are in need of more messages but don't want to pay, there is a way to implement an auto-trimming function to your chatbox javasript code, however, doing this will delete your oldest messages. i will add a section for how to do that if anyone asks.

step 1: create your firebase project (this is the hardest part of the whole tutorial)

1. go to firebase console.

2. create a new project and name it anything you want. i named mine "chatbox-demo".

3. once the project is ready, hit continue, scroll down, and click on authentication. from there, click on get started, and it shold take you to the "sign-in method" tab.

4. under "native providers" click on "anonymous". enable it and save. this allows users to write messages without needing an account.

5.on the left sidebar, click on the "build" dropdown menu and scroll to "realtime database". click on it and hit "create database". for your location, use united states. for security rules, click on "start in test mode". this means anyone can read or write to yor database, which is what we want for your website :) we are using DOMPurify for security and to sanitize messages. hit enable and it should take you to your database's "data" tab.

6. go to the "rules", tab and replace what's there with the following:

{
  "rules": {
    ".read": "true",
    ".write": "auth !=null",
    "messages": {
      ".indexOn": ["timestamp"]
    }
  }
}

and hit publish.

7. from here we need to click on the gear icon next to "project overview" at the top of the left sidebar and go to "project settings". scroll down to "your apps" and click on the 3rd option (the brackets) to create a web app.

8. create a nickname for the app. i named mine "dewdrop-demo". click on "register app" and you should get a chunk of code. scroll to "const firebaseConfig = {" and copy that whole chunk. paste it into your chat.js file under the //firebase configuration section (near the top).

WAHOO!!!!!!!! your chatbox is connected to your database!! now we just have to link all the files together :)

step 2: integrating the chatbox into your webstite

1. now that you have your chatbox javascript file ready and connected to your firebase database, we need to link it into your html file. wherever you want to place the chatbox, copy and paste the following:

<div id="chat-container-main">
  <div id="chat-title">
    <p> chat </p>
  </div>
  <div id="chat-container">
    <button id="load-older-button">load older</button>
    <ul id="chat-messages"></ul>
  </div>
  <div id="username-container">
    <div id="username-input-section">
      <div class="input-wrapper">
        <input type="text" id="username-input" placeholder=" enter username ">
        <input type="text" id="website-input" placeholder=" website (optional) ">
      </div>
      <div id="button-container">
        <button id="set-username-btn"> set! </button>
      </div>
    </div>
    <div id="welcome-message">
      <div class="welcome-text">
        <span>welcome!</span>
        <span class="username-display" id="display-username"></span>
      </div>
      <img src="https://files.catbox.moe/m0id8v.gif" class="welcome-image">
    </div>
  </div>
  <div id="chat-controls">
    <div class="input-group">
      <textarea id="chat-input" placeholder="type a message..."></textarea>
      <div id="char-counter" class="char-counter">0/150</div>
    </div>
    <div class="button-group">
      <button id="send-button">
        <div id="send-text">send!</div>
      </button>
      <button id="emoji-button" type="button">
        <div id="emoji-content">
          <img src="https://files.catbox.moe/486fxr.png" style="width: 18px; height: 18px;">
        </div>
      </button>
    </div>
    <div id="emoji-picker" class="emoji-picker"></div>
  </div>
</div>
<script type="module" src="/chat.js"></script>

2. create another html file named "emoji-picker.html". this is where all your emoji buttons will live. delete everything in the file and paste the following:

<button class="emoji" data-code=":bubbles:">
  <img src="https://files.catbox.moe/92w2pg.gif" class="emoji" alt="bubbles">
 </button>

this will be your first emoji! use this template to create the rest of the emojis you want:

 <button class="emoji" data-code=":example:">
  <img src="/emojis/example.png" class="emoji" alt="example">
 </button>

you are able to use pngs and gifs.

note: all emoji codes must be unique.

3. copy the following to the bottom of your main css file:

/* container holding the chatbox elements*/
#chat-container-main {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; 
    justify-content: flex-start;
    align-items: stretch;
    width: 160px;
    background: #fadceb url('https://files.catbox.moe/7bhrh2.jpg');
    border: 1px solid #77c4fc;
    border-radius: 30px;
    padding: 16px;  
}

#chat-title {
    margin-top: -20px;
    color: #f99ecc;
    text-align: center;
    }
    
#chat-container {
    width: 140px;
    height: 150px; 
    border: 1px solid #B6E2FE;
    border-radius: 20px;
    padding: 10px;
    overflow-y: auto;
    background-image: url('https://files.catbox.moe/10haj1.jpeg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    display: block;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#chat-container::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

/*whole username box */
#username-container {
    width: 162px;
    height: min-content;
    padding: 10px;
    background-image: url('https://files.catbox.moe/vj9s6k.jpeg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 20px;
    border: 1.5px dashed #F1C4F3;
    margin-top: 10px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}
/* inner wrapper*/
#username-container > div {
    display: flex;
    gap: 22px;
}

#username-container .input-wrapper {
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    width: 100%;
    overflow: visible;
}


#username-input-section {
  display:flex;
}

#welcome-message {
    display: none; 
    flex-direction: column;
    align-items: center;
    gap: 8px;
}


#username-input-section {
    display: flex;
}
#welcome-message {
    display: none;
}


#username-container.show-welcome #username-input-section {
    display: none;
}
#username-container.show-welcome #welcome-message {
    display: flex;
}

.welcome-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Verdana2";
    color: #f99ecc;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: -20px;
}

.username-display {
    font-size: 13px;
    color: #d58bd9;
    margin-top: 2px;
    margin-bottom: 12px;
   }

.welcome-image {
    margin-top: -18px;
}

.message-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.timestamp {
    order: -1;
    opacity: 1;
    font-style: italic;
    font-size: .6em;
    margin-left: auto;
    width: 100%;
    text-align: right;
    margin-bottom: -4px;
}

.username {
    font-size: 14px;
    margin-right: 1px;
    margin-left: 1px;
    width: 100%;
}


#username-input {
    width: 100px;
    border: 1px solid #64c1f1;
    border-radius: 8px;
    font-family: "Verdana2";
    font-size: 11px;
    color: #64c1f1;
    background: #d4f3fb;
    box-sizing: border-box;
    outline: none;
}

#username-input::placeholder {
    color: #64c1f1;
}

#website-input {
    width: 100px;
    border: 1px solid #64c1f1;
    border-radius: 8px;
    font-family: "Verdana2";
    font-size: 11px;
    color: #64c1f1;
    background: #d4f3fb;
    box-sizing: border-box;
    outline: none;
}

#website-input::placeholder {
    color: #64c1f1;
}

#button-container {
    margin-top: 14px;
    margin-left: -16px;
}

#set-username-btn {
    width: auto;
    background-color: #f99ecc;
    color: white;
    border: none;
    border-radius: 10px;
    font-family: "Verdana2";
    font-size: 12px;
    flex-shrink: 0;
}
#set-username-btn:hover {
    background: #ffb3d9;
}

.message-text strong {
  font-weight: 500;
}

.message-text {
    white-space: pre-wrap; 
    overflow-wrap: break-word;
}

.message-text a {
  color: #8aaf46; 
  text-decoration: none;
  word-break: break-all; 
}

.message-text a:hover {
  color: #93d4f5;
}

.message {
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    white-space: normal; 
    padding: 8px;
    border-radius: 10px;
    margin: 3px 0;
    max-width: 90%; 
    font-size: 12px;
}
.message:nth-child(5n+1) { /*pink*/
    background-color: #fbe3ef;
    border: 1px solid #f99ecc;
    color: #f99ecc;
}
.message:nth-child(5n+2) { /*yellow*/
    background-color: #fef8c1;
    border: 1px solid #efc156;
    color: #efc156;
}
.message:nth-child(5n+3) { /*green*/
    background-color: #e2f9b5;
    border: 1px solid #8aaf46;
    color: #8aaf46;
}
.message:nth-child(5n+4) { /*blue*/
    background-color: #d4f3fb;
    border: 1px solid #64c1f1;
    color: #64c1f1;
}
.message:nth-child(5n+5) { /*purple*/
    background-color: #efddf5;
    border: 1px solid #d58bd9;
    color: #d58bd9;
}

.message:nth-child(5n+1),
.message:nth-child(5n+1) .username,
.message:nth-child(5n+1) .timestamp {
    color: #f99ecc;
}

.message:nth-child(5n+2),
.message:nth-child(5n+2) .username,
.message:nth-child(5n+2) .timestamp {
    color: #efc156;
}

.message:nth-child(5n+3),
.message:nth-child(5n+3) .username,
.message:nth-child(5n+3) .timestamp {
    color: #8aaf46;
}
.message:nth-child(5n+4),
.message:nth-child(5n+4) .username,
.message:nth-child(5n+4) .timestamp {
    color: #64c1f1;
}
.message:nth-child(5n+5),
.message:nth-child(5n+5) .username,
.message:nth-child(5n+5) .timestamp {
    color: #d58bd9;
}


.message:nth-child(5n+1) .message-text strong {
  color: #e67aa6;
}


.message:nth-child(5n+2) .message-text strong {
  color: #d89a42; 
}


.message:nth-child(5n+3) .message-text strong {
  color: #759b3c; 
}


.message:nth-child(5n+4) .message-text strong {
  color: #5499d0; 
}

.message:nth-child(5n+5) .message-text strong {
  color: #b06cad;
}

.message:nth-child(5n+1) .username a {
  color: #f99ecc;
  text-decoration: none;
}
.message:nth-child(5n+2) .username a {
  color: #efc156;
  text-decoration: none;
}
.message:nth-child(5n+3) .username a {
  color: #8aaf46;
  text-decoration: none;
}
.message:nth-child(5n+4) .username a {
  color: #64c1f1;
  text-decoration: none;
}
.message:nth-child(5n+5) .username a {
  color: #d58bd9;
  text-decoration: none;
}

.message:nth-child(5n+1) .username a:hover {
  color: #e67aa6;
  text-decoration: none;
}
.message:nth-child(5n+2) .username a:hover {
  color: #d89a42;
  text-decoration: none;
}
.message:nth-child(5n+3) .username a:hover {
  color: #759b3c;
  text-decoration: none;
}
.message:nth-child(5n+4) .username a:hover {
  color: #5499d0;
  text-decoration: none;
}
.message:nth-child(5n+5) .username a:hover {
  color: #b06cad;
  text-decoration: none;
}

#chat-messages {
    min-height: min-content; 
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; 
    overflow-y: auto; 
}


#chat-controls {
    display: flex;
    align-items: center; 
    gap: 10px; 
    margin-top: 10px;
}

.button-group {
    display: flex;
    flex-direction: column; 
    gap: 4px; 
    
}

#chat-input {
    width: 95px;
    height: 40px;
    overflow-y: auto;
    border-width: 7px; 
    border-style: solid; 
    border-image: url("https://i.imgur.com/ROjUrNz.gif") 6 fill round;
    padding: 2px;
    resize: none;
    font-family: "Verdana2";
    font-size: 12px;
    color: #f99ecc;
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: break-word; 
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

#chat-input::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}
#chat-input::placeholder {
    color: #f99ecc;
    font-size: 12px;
}

#load-older-button {
    display: block;
    margin-left: 20px;
    margin-bottom: 6px;
    width: 100px;                
    padding: none;     
    background-color: #e0f3fc; 
    color: #a2daf7;  
    border-radius: 10px;
    border-width:1px;
    border-color: #a2daf7;
    border-style:dashed;
    font-family: "Verdana2";
    font-size: 11px;       
}


#load-older-button:hover {
    background-color: #f0f9fe;
}


#load-older-button:active {
    background-color: #e0f3fc;
}
.char-counter {
    position: absolute;
    right: 7px;
    bottom: -12px;
    font-size: 0.5rem;
    color: #f99ecc;
    font-style: italic;
    text-align: right;
    padding: 2px 5px;
}

.input-group {
    position: relative;
    flex-grow: 1;
}


.char-counter.over-limit {
    color: #F35890;
    font-weight: bold;
}


#send-button {
    width: 40px;
    height: 22px;
    background-color: #efddf5;
    color: #d58bd9;
    border: 1px solid #d58bd9;
    border-radius: 10px;
    text-align: center;
    font-family: "Verdana2";
    font-size: 12px;
    margin-left: -3px;
    outline: none;
}

#send-button:hover {
    background-color: #f6ebfa;
}

#send-text {
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    justify-content: center;
}


#emoji-button {
    width: 40px;
    height: 22px;
    background-color: #d4f3fb;
    color: #d58bd9;
    border: 1px solid #64c1f1;
    border-radius: 10px;
    text-align: center;
    font-family: "Verdana2";
    font-size: 12px;
    margin-left: -3px;
}

#emoji-content {
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    justify-content: center;
}

.input-group {
    position: relative;
}

.emoji-picker {
    display: none;
    position: absolute;
    background: white;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    right: 40px;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 8px; 
    width: 150px; 

}

.emoji-picker.active {
    display: grid;
    gap: 5px;
    outline: none;
    background: #ecf8fc;
    border: 1px solid #64c1f1;
    border-radius: 10px;
}

.emoji {
    transition: transform 0.2s;
    outline: none;
    border: none;
    background: #ecf8fc;
}
.emoji img {
    width: 20px;
    height: 20px;
    outline: none;
    border: none;
}

.emoticon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

#emoji-button:hover {
    background-color: #e1f7fc;
}

this is the all the current styling of the chatbox! you can play with the images, colors, shapes, and fonts as you wish sire

please credit me if you use this tutorial!