☰

DeepSeek Conversation Search [DSCS]

Adds icon to the sidebar that opens a modal with chat search functionality

// ==UserScript==
// @name         DeepSeek Conversation Search [DSCS]
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds icon to the sidebar that opens a modal with chat search functionality
// @author       Dramorian
// @match        https://chat.deepseek.com/*
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    const sidebarClass = '.ec92d1d3';
    const chatItemClass = '.f9edaa3c .c08e6e93';

    GM_addStyle(`
        .search-icon {
            cursor: pointer;
            padding: 10px;
            text-align: center;
        }
        .search-icon span {
            font-size: 20px;
            color: #000;
        }
        .search-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            width: 450px;
            max-height: 80%;
            display: flex;
            flex-direction: column;
        }
        .search-modal.dark {
            background-color: #333;
            color: #fff;
        }
        .search-modal.light {
            background-color: #fff;
            color: #000;
        }
        .search-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            min-height: 50px;
            position: relative;
            border-bottom: 1px solid #ddd;
        }
        .search-header.dark {
            border-bottom: 1px solid #444;
        }
        .search-input {
            flex-grow: 1;
            outline: none;
            border: none;
            background: transparent;
            font-size: 16px;
            padding-right: 30px;
        }
        .close-button {
            font-size: 20px;
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        .chat-list {
            max-height: 300px;
            overflow-y: auto;
            padding-right: 10px;
            margin-bottom: 20px;
            flex-grow: 1;
        }
        .chat-item {
            padding: 10px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
            margin-bottom: 8px;
        }
        .chat-item.light:hover {
            background-color: #f1f1f1;
        }
        .chat-item.dark:hover {
            background-color: #555;
        }
    `);

    new MutationObserver(() => {
        const sidebar = document.querySelector(sidebarClass);
        if (sidebar && !sidebar.querySelector('.search-icon')) {
            addSearchIcon(sidebar);
        }
    }).observe(document.body, { childList: true, subtree: true });

    function addSearchIcon(container) {
    const iconContainer = document.createElement('div');
    iconContainer.classList.add('search-icon', 'ds-icon-button', 'd1f5e283');

    // Insert the SVG icon
    iconContainer.innerHTML = `
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xl-heavy">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 4.25C7.16015 4.25 4.25 7.16015 4.25 10.75C4.25 14.3399 7.16015 17.25 10.75 17.25C14.3399 17.25 17.25 14.3399 17.25 10.75C17.25 7.16015 14.3399 4.25 10.75 4.25ZM2.25 10.75C2.25 6.05558 6.05558 2.25 10.75 2.25C15.4444 2.25 19.25 6.05558 19.25 10.75C19.25 12.7369 18.5683 14.5645 17.426 16.0118L21.4571 20.0429C21.8476 20.4334 21.8476 21.0666 21.4571 21.4571C21.0666 21.8476 20.4334 21.8476 20.0429 21.4571L16.0118 17.426C14.5645 18.5683 12.7369 19.25 10.75 19.25C6.05558 19.25 2.25 15.4444 2.25 10.75Z" fill="currentColor"></path>
        </svg>
    `;

    iconContainer.addEventListener('click', openSearchModal);
    container.appendChild(iconContainer);
}

    function openSearchModal() {
        if (document.querySelector('.search-modal')) return;

        const isDark = document.body.hasAttribute('data-ds-dark-theme');
        const modal = document.createElement('div');
        modal.classList.add('search-modal', isDark ? 'dark' : 'light');

        const header = createModalHeader(isDark, modal);
        const chatList = createChatList(isDark);

        modal.append(header, chatList);
        document.body.appendChild(modal);
    }

    function createModalHeader(isDark, modal) {
        const header = document.createElement('div');
        header.classList.add('search-header', isDark ? 'dark' : 'light');

        const searchInput = document.createElement('div');
        searchInput.classList.add('search-input');
        searchInput.setAttribute('contenteditable', 'true');

        const closeButton = document.createElement('span');
        closeButton.classList.add('close-button');
        closeButton.innerHTML = '&#10005;';
        closeButton.addEventListener('click', () => modal.remove());

        searchInput.addEventListener('input', () => filterChats(searchInput.textContent.toLowerCase()));

        header.append(searchInput, closeButton);
        return header;
    }

    function createChatList(isDark) {
        const chatList = document.createElement('div');
        chatList.classList.add('chat-list');

        document.querySelectorAll(chatItemClass).forEach(item => {
            const chatItem = document.createElement('div');
            chatItem.classList.add('chat-item', isDark ? 'dark' : 'light');
            chatItem.textContent = item.textContent;

            chatItem.addEventListener('mouseenter', () => {
                chatItem.classList.add(isDark ? 'dark' : 'light');
            });
            chatItem.addEventListener('mouseleave', () => {
                chatItem.classList.remove(isDark ? 'dark' : 'light');
            });
            chatItem.addEventListener('click', () => {
                item.click();
                document.querySelector('.search-modal')?.remove();
            });

            chatList.appendChild(chatItem);
        });

        return chatList;
    }

    function filterChats(query) {
        document.querySelectorAll('.search-modal .chat-item').forEach(item => {
            item.style.display = item.textContent.toLowerCase().includes(query) ? 'block' : 'none';
        });
    }
})();