added scroll to bottom template

chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.css

@@ -0,0 +1,97 @@
+.stt-preview-container {
+    border: 1px solid #ddd;
+    padding: 20px;
+    margin-top: 20px;
+    border-radius: 4px;
+    background: #f9f9f9;
+}
+
+.stt-preview-box {
+    position: relative;
+    height: 200px;
+    overflow-y: auto;
+    border: 1px solid #ccc;
+    background: #fff;
+    padding: 15px;
+    font-size: 14px;
+}
+
+.stt-preview-content p {
+    margin-bottom: 10px;
+}
+
+.scroll-to-top-button {
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    cursor: pointer;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.scroll-to-top-button.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.scroll-to-top-button.stt-style-circle {
+    border-radius: 50%;
+}
+
+.scroll-to-top-button.stt-style-arrow,
+.scroll-to-top-button.stt-style-text {
+    border-radius: 4px;
+}
+
+.scroll-to-top-button.stt-size-small {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+}
+
+.scroll-to-top-button.stt-size-medium {
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+}
+
+.scroll-to-top-button.stt-size-large {
+    width: 60px;
+    height: 60px;
+    font-size: 24px;
+}
+
+.scroll-to-top-button.stt-position-bottom-right {
+    right: 20px;
+    bottom: 20px;
+}
+
+.scroll-to-top-button.stt-position-bottom-left {
+    left: 20px;
+    bottom: 20px;
+}
+
+.stt-button-content {
+    pointer-events: none;
+}
+
+.stt-style-circle .stt-button-content::before {
+    content: '↑';
+}
+
+.stt-style-arrow .stt-button-content::before {
+    content: '↑';
+}
+
+.stt-style-text .stt-button-content::before {
+    content: 'Top';
+    font-weight: bold;
+}
+
+.color-picker {
+    width: 70px;
+    height: 35px;
+}

chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.js

@@ -0,0 +1,67 @@
+(function($) {
+    'use strict';
+
+    function updatePreview() {
+        const settings = {
+            style: $('input[name="scroll_to_top_style"]:checked').val(),
+            bgColor: $('input[name="scroll_to_top_bg_color"]').val(),
+            textColor: $('input[name="scroll_to_top_text_color"]').val(),
+            size: $('input[name="scroll_to_top_size"]').val(),
+            position: $('input[name="scroll_to_top_position"]').val(),
+        };
+
+        const $button = $('#stt-preview-button');
+        
+        $button.css('background-color', settings.bgColor);
+        $button.css('color', settings.textColor);
+        
+        $button.removeClass('stt-style-circle stt-style-arrow stt-style-text')
+               .addClass('stt-style-' + settings.style);
+        
+        $button.removeClass('stt-size-small stt-size-medium stt-size-large')
+               .addClass('stt-size-' + settings.size);
+        
+        $button.removeClass('stt-position-bottom-right stt-position-bottom-left')
+               .addClass('stt-position-' + settings.position);
+    }
+
+    $(document).ready(function() {
+        const $previewBox = $('.stt-preview-box');
+        const $button = $('#stt-preview-button');
+        
+        updatePreview();
+        
+        $('input[name="scroll_to_top_style"]').change(function() {
+            updatePreview();
+        });
+        
+        $('input[name="scroll_to_top_bg_color"]').change(function() {
+            updatePreview();
+        });
+        
+        $('input[name="scroll_to_top_text_color"]').change(function() {
+            updatePreview();
+        });
+        
+        $('select[name="scroll_to_top_size"]').change(function() {
+            updatePreview();
+        });
+        
+        $('select[name="scroll_to_top_position"]').change(function() {
+            updatePreview();
+        });
+
+        $previewBox.on('scroll', function() {
+            if ($previewBox.scrollTop() > 50) {
+                $button.addClass('visible');
+            } else {
+                $button.removeClass('visible');
+            }
+        });
+
+        $button.on('click', function(e) {
+            e.preventDefault();
+            $previewBox.animate({ scrollTop: 0 }, 300);
+        });
+    });
+})(jQuery);

chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.css

@@ -0,0 +1,120 @@
+.scroll-to-top-button {
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    cursor: pointer;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.scroll-to-top-button:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.scroll-to-top-button.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.scroll-to-top-button.stt-style-circle {
+    border-radius: 50%;
+}
+
+.scroll-to-top-button.stt-style-arrow,
+.scroll-to-top-button.stt-style-text {
+    border-radius: 4px;
+}
+
+.scroll-to-top-button.stt-size-small {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+}
+
+.scroll-to-top-button.stt-size-medium {
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+}
+
+.scroll-to-top-button.stt-size-large {
+    width: 60px;
+    height: 60px;
+    font-size: 24px;
+}
+
+.scroll-to-top-button.stt-position-bottom-right {
+    right: 20px;
+    bottom: 20px;
+    left: auto;
+}
+
+.scroll-to-top-button.stt-position-bottom-left {
+    left: 20px;
+    bottom: 20px;
+    right: auto;
+}
+
+.stt-button-content {
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.stt-style-circle .stt-button-content::before {
+    content: '↑';
+}
+
+.stt-style-arrow .stt-button-content::before {
+    content: '↑';
+}
+
+.stt-style-text .stt-button-content::before {
+    content: 'Top';
+    font-weight: bold;
+}
+
+.scroll-to-top-button.stt-hide-mobile {
+    display: none;
+}
+
+@media screen and (max-width: 768px) {
+    .scroll-to-top-button.stt-size-small {
+        width: 35px;
+        height: 35px;
+        font-size: 14px;
+    }
+    
+    .scroll-to-top-button.stt-size-medium {
+        width: 45px;
+        height: 45px;
+        font-size: 18px;
+    }
+    
+    .scroll-to-top-button.stt-size-large {
+        width: 50px;
+        height: 50px;
+        font-size: 20px;
+    }
+    
+    .scroll-to-top-button.stt-position-bottom-right {
+        right: 15px;
+        bottom: 15px;
+    }
+    
+    .scroll-to-top-button.stt-position-bottom-left {
+        left: 15px;
+        bottom: 15px;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .scroll-to-top-button.stt-hide-mobile {
+        display: flex;
+    }
+}

chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.js

@@ -0,0 +1,90 @@
+(function() {
+    'use strict';
+
+    if (typeof scrollToTopSettings === 'undefined') {
+        return;
+    }
+
+    const settings = scrollToTopSettings;
+    let button = null;
+    let scrollTimeout = null;
+
+    function createButton() {
+        button = document.createElement('div');
+        button.className = 'scroll-to-top-button';
+        button.setAttribute('aria-label', 'Scroll to top');
+        
+        button.classList.add('stt-style-' + settings.style);
+        button.classList.add('stt-size-' + settings.size);
+        button.classList.add('stt-position-' + settings.position);
+        
+        if (!settings.showMobile) {
+            button.classList.add('stt-hide-mobile');
+        }
+        
+        const content = document.createElement('span');
+        content.className = 'stt-button-content';
+        button.appendChild(content);
+        
+        document.body.appendChild(button);
+        
+        applyStyles();
+        addEventListeners();
+    }
+
+    function applyStyles() {
+        if (!button) return;
+        
+        button.style.backgroundColor = settings.bgColor;
+        button.style.color = settings.textColor;
+        
+        if (settings.position === 'bottom-right') {
+            button.style.right = '20px';
+            button.style.left = 'auto';
+        } else {
+            button.style.left = '20px';
+            button.style.right = 'auto';
+        }
+    }
+
+    function handleScroll() {
+        if (!button) return;
+        
+        clearTimeout(scrollTimeout);
+        
+        scrollTimeout = setTimeout(function() {
+            if (window.scrollY > 200) {
+                button.classList.add('visible');
+            } else {
+                button.classList.remove('visible');
+            }
+        }, 10);
+    }
+
+    function scrollToTop(e) {
+        e.preventDefault();
+        
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+
+    function addEventListeners() {
+        if (!button) return;
+        
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        
+        button.addEventListener('click', scrollToTop);
+    }
+
+    function init() {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', createButton);
+        } else {
+            createButton();
+        }
+    }
+
+    init();
+})();