Add files via upload

chat.html

@@ -50,7 +50,11 @@
             <div id="chat">
         
             </div>
+
+
             <div id="chat-input">
+                <div id="chat-autocomplete-list"></div>
+
                 <form>
                     <input type="text" placeholder="Send a Message">
                 </form>

css/app.css

@@ -683,6 +683,65 @@ body {
 }
 
 
+
+
+#chat-autocomplete-list {
+    position: absolute;
+    bottom: 65px;
+    left: 10px;
+    width: calc(100% - 40px);
+    border-radius: 10px;
+    background: #222;
+    color: #FFF;
+
+    max-height: 300px;
+    overflow: hidden;
+    overflow-y: visible;
+
+    font-size: 14px;;
+
+    color: #696969;
+}
+
+#chat-autocomplete-list::-webkit-scrollbar { width: 10px; }
+#chat-autocomplete-list::-webkit-scrollbar-track { background: #1e1e1e; }
+#chat-autocomplete-list::-webkit-scrollbar-thumb { background-color: #555; border-radius: 10px; border: 2px solid #1e1e1e; }
+#chat-autocomplete-list::-webkit-scrollbar-thumb:hover { background-color: #777; }
+
+#chat-autocomplete-list div {
+    margin: 5px 10px;
+    padding: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#chat-autocomplete-list div.autocomplete-item {
+    cursor: pointer;
+    transition: all ease-in-out 300ms;
+}
+
+#chat-autocomplete-list div:not(.autocomplete-item) {
+    background: #191919;
+    color: #FFF;
+    padding: 10px;
+    margin: 10px;
+}
+
+#chat-autocomplete-list .autocomplete-item strong {
+    display: block;
+}
+
+#chat-autocomplete-list .autocomplete-item:hover,
+#chat-autocomplete-list .autocomplete-item.active {
+    color: #FFF;
+    background: #292929;
+}
+
+#chat-autocomplete-list .autocomplete-item small {
+    color: #666;
+}
+
+
 #statistics {
     position: fixed;
     z-index: 11;

js/app-mockup.js

@@ -1014,4 +1014,4 @@ function randomString(length) {
 function randomColor() {
     const randomColor = "hsl(" + Math.random() * 360 + ", 100%, 75%)";
     return randomColor;
-}
+}

js/app.js

@@ -404,6 +404,7 @@ function hexToRGBA(hexadecimal,opacity) {
 const chatInputConfig = document.getElementById("chat-input-config");
 const chatInputSend = document.getElementById("chat-input-send");
 const chatInputForm = document.querySelector("#chat-input form");
+const chatInput = chatInputForm.querySelector("input[type=text]")
 const settings = document.getElementById("chat-input-settings");
 
 chatInputForm.addEventListener("submit", function(event) {
@@ -500,7 +501,6 @@ async function executeModCommand(event, command) {
     event.preventDefault();
 
     if (streamerBotConnected == true) {
-        const chatInput = chatInputForm.querySelector("input[type=text]")
         chatInput.value = command;
 
         chatInputForm.requestSubmit();
@@ -537,3 +537,89 @@ document.addEventListener("DOMContentLoaded", () => {
         });
     });
 });
+
+
+
+
+
+
+let chatcommands = {};
+let chatcurrentFocus = -1;
+
+fetch('js/commands.json')
+.then(response => response.json())
+.then(data => {
+    chatcommands = data;
+});
+
+const chatcommandslist = document.getElementById('chat-autocomplete-list');
+
+chatInput.addEventListener('input', function () {
+    const value = this.value.trim();
+    chatcommandslist.innerHTML = '';
+    chatcurrentFocus = -1;
+    if (!value.startsWith('/')) return;
+        Object.entries(chatcommands).forEach(([groupName, commands]) => {
+        
+        const filtered = commands.filter(cmd => cmd.name.startsWith(value));
+
+        if (filtered.length === 0) return;
+
+        const groupTitle = document.createElement('div');
+        groupTitle.textContent = groupName;
+        chatcommandslist.appendChild(groupTitle);
+        filtered.forEach(cmd => {
+            const item = document.createElement('div');
+            item.classList.add('autocomplete-item');
+            item.innerHTML = `<strong>${cmd.name}</strong><small> ${cmd.usage}</small>`;
+            item.addEventListener('click', () => {
+                chatInput.value = cmd.name + ' ';
+                chatcommandslist.innerHTML = '';
+            });
+            chatcommandslist.appendChild(item);
+        });
+    });
+});
+
+
+chatInput.addEventListener('keydown', function (e) {
+    const items = chatcommandslist.querySelectorAll('.autocomplete-item');
+    
+    if (items.length === 0) return;
+    
+    if (e.key === 'ArrowDown') {
+        chatcurrentFocus++;
+        highlightItem(items);
+    }
+    else if (e.key === 'ArrowUp') {
+        chatcurrentFocus--;
+        highlightItem(items);
+    }
+    
+    else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (chatcurrentFocus > -1 && items[chatcurrentFocus]) {
+            items[chatcurrentFocus].click();
+        }
+    }
+});
+
+
+function highlightItem(items) {
+    if (!items) return;
+
+    items.forEach(item => item.classList.remove('active'));
+
+    if (chatcurrentFocus >= items.length) chatcurrentFocus = 0;
+    if (chatcurrentFocus < 0) chatcurrentFocus = items.length - 1;
+
+    items[chatcurrentFocus].classList.add('active');
+    items[chatcurrentFocus].scrollIntoView({ block: "nearest" });
+}
+
+
+document.addEventListener('click', function (e) {
+    if (e.target !== chatcommandslist) {
+        chatcommandslist.innerHTML = '';
+    }
+});

js/commands.json

@@ -0,0 +1,29 @@
+{
+    "Twitch" : [
+        { "name" : "/me", "usage" : "[message]"  },
+        { "name" : "/announce", "usage" : "[message]"  },
+        { "name" : "/clear", "usage" : ""  },
+        { "name" : "/slow", "usage" : "[duration]"  },
+        { "name" : "/slowoff", "usage" : ""  },
+        { "name" : "/subscribers", "usage" : ""  },
+        { "name" : "/subscribersoff", "usage" : ""  },
+        { "name" : "/commercial", "usage" : "[duration]"  },
+        { "name" : "/timeout", "usage" : "[user] [duration] [reason]"  },
+        { "name" : "/untimeout", "usage" : ""  },
+        { "name" : "/ban", "usage" : "[user] [duration] [reason]"  },
+        { "name" : "/unban", "usage" : ""  },
+        { "name" : "/mod", "usage" : "[user]"  },
+        { "name" : "/unmod", "usage" : "[user]"  },
+        { "name" : "/vip", "usage" : "[user]"  },
+        { "name" : "/unvip", "usage" : "[user]"  },
+        { "name" : "/shoutout", "usage" : "[user]"  },
+        { "name" : "/raid", "usage" : "[user]"  },
+        { "name" : "/unraid", "usage" : ""  }
+    ],
+    "YouTube" : [
+        { "name" : "/yt/title", "usage" : "[title]"  },
+        { "name" : "/yt/description", "usage" : "[description]"  },
+        { "name" : "/yt/timeout", "usage" : "[user] [duration]"  },
+        { "name" : "/yt/ban", "usage" : "[user]"  }
+    ]
+}