ჩატი:

<div class="gKay chat-toggle-btn" onclick="toggleChat(this)" data-input-id="mchatMsgF">
    <i class="fas fa-keyboard"></i> <span class="chatLabel">Geo</span>
    <div class="flag-wrapper09">
        <div class="flag-slider chatSlider">
            <img src="/geo.png" alt="Geo">
            <img src="/eng.png" alt="Eng">
        </div>
    </div>
    <input type="checkbox" class="chat_inp" style="display: none;" checked>
</div>

კომენტარები:

<div class="gKay chat-toggle-btn" onclick="toggleChat(this)" data-input-id="message">
    <i class="fas fa-keyboard"></i> <span class="chatLabel">Geo</span>
    <div class="flag-wrapper09">
        <div class="flag-slider chatSlider">
            <img src="/geo.png" alt="Geo">
            <img src="/eng.png" alt="Eng">
        </div>
    </div>
    <input type="checkbox" class="chat_inp" style="display: none;" checked>
</div>

მოკლე აღწერა (brief):

<div class="gKay chat-toggle-btn" onclick="toggleChat(this)" data-input-id="brief">
    <i class="fas fa-keyboard"></i> <span class="chatLabel">Geo</span>
    <div class="flag-wrapper09">
        <div class="flag-slider chatSlider">
            <img src="/geo.png" alt="Geo">
            <img src="/eng.png" alt="Eng">
        </div>
    </div>
    <input type="checkbox" class="chat_inp" style="display: none;" checked>
</div>

js:

(function() {
    var transChat = { 'a':'ა','b':'ბ','g':'გ','d':'დ','e':'ე','v':'ვ','z':'ზ','t':'ტ','i':'ი','k':'კ','l':'ლ','m':'მ','n':'ნ','o':'ო','p':'პ','j':'ჯ','r':'რ','s':'ს','u':'უ','f':'ფ','q':'ქ','y':'ყ','c':'ც','x':'ხ','h':'ჰ','w':'წ','W':'ჭ','Z':'ძ','T':'თ','J':'ჟ','R':'ღ','S':'შ','C':'ჩ' };
    window.toggleChat = function(btn) {
        if (!btn) return;
        var cb = btn.querySelector('.chat_inp');
        var slider = btn.querySelector('.chatSlider');
        var label = btn.querySelector('.chatLabel');
        if (cb) {
            cb.checked = !cb.checked;
            if (slider) slider.style.transform = cb.checked ? "translateX(0px)" : "translateX(-25px)";
            if (label) label.innerText = cb.checked ? "Geo" : "Eng";
        }
       
        new Audio('/onclick.mp3').play().catch(function(){});
    };
    function isGeorgianEnabledForElement(targetElement) {
        if (!targetElement || !targetElement.id) return false;
        var btn = document.querySelector('.chat-toggle-btn[data-input-id="' + targetElement.id + '"]');
        if (!btn) {
            btn = document.querySelector('.chat-toggle-btn');
        }
        if (btn) {
            var cb = btn.querySelector('.chat_inp');
            return cb && cb.checked;
        }
        return false;
    }
    function handleChatTyping(e) {
        if (!isGeorgianEnabledForElement(e.target)) return;
        var charCode = e.which || e.keyCode;
        var charStr = String.fromCharCode(charCode);
        if (charCode === 96) {
            e.preventDefault();
            var activeBtn = document.querySelector('.chat-toggle-btn[data-input-id="' + e.target.id + '"]');
            if (!activeBtn) activeBtn = document.querySelector('.chat-toggle-btn');            
            if (activeBtn) window.toggleChat(activeBtn);
            return;
        }
        if (transChat[charStr]) {
            e.preventDefault();
            var t = e.target;
            var start = t.selectionStart;
            var end = t.selectionEnd;
            var oldVal = t.value;
            t.value = oldVal.substring(0, start) + transChat[charStr] + oldVal.substring(end);
            t.selectionStart = t.selectionEnd = start + 1;

            t.dispatchEvent(new Event('input', { bubbles: true }));
        }
    }
    document.addEventListener('keypress', function(e) {
        if (!e.target) return;

        var isTargetField = e.target.id === 'mchatMsgF' || 
                            e.target.id === 'message' || 
                            e.target.id === 'brief';

        if (isTargetField) {
            handleChatTyping(e);
        }
    }, true);

})();