☰

Duck.ai chats search bar

Search bar in recent chats list

// ==UserScript==
// @name                Duck.ai chats search bar
// @namespace           https://greasyfork.org/users/821661
// @match               https://duckduckgo.com/*
// @grant               GM_addStyle
// @version             0.1
// @author              hdyzen
// @description         Search bar in recent chats list
// @license             GPL-3.0-only
// ==/UserScript==

const input = getInput();

function waitRecentChatList() {
    const observer = new MutationObserver(() => {
        const recentChatList = document.querySelector(".W8D_h701YdeIQCjL9_Dy");

        if (!location.search.includes("ia=chat") || !recentChatList || document.body.contains(input)) {
            return;
        }

        observer.disconnect();
        recentChatList.insertAdjacentElement("afterbegin", input);
    });

    observer.observe(document, { subtree: true, childList: true });
}
waitRecentChatList();

function filterChatsByText(search) {
    const chats = document.querySelectorAll(".PMQFURe7WSKqXJk9e3Jn");

    for (const chat of chats) {
        chat.setAttribute("match-search", chat.innerText.toLowerCase().includes(search) ? true : false);
    }
}

function getInput() {
    const input = document.createElement("input");
    input.type = "text";
    input.placeholder = "Search";
    input.style = "width: 100%;font-size: 16px;padding-inline: 11px;height: 44px;border-radius: var(--default-border-radius);background-color: #333333;box-shadow: 0 1px 3px rgba(0,0,0,0.5);outline: none;position: sticky;top: 0;";
    input.addEventListener("input", e => {
        const search = e.target.value.toLowerCase();

        filterChatsByText(search);
    });

    return input;
}

GM_addStyle(`
.HTQSbbGLgf1_TYR3V7Ln:has([match-search]):not(:has(.JYOnH1YkhsxhT9yFGgea > [match-search="true"])), [match-search="false"] {
    display: none !important;
}
`);

/* 
Search bar template

<input 
    type="text" 
    style="width: 100%;font-size: 16px;padding-inline: 11px;height: 44px;border-radius: var(--default-border-radius);background-color: #333333;box-shadow: 0 1px 3px rgba(0,0,0,0.5);outline: none;position: sticky;top: 0;" 
    placeholder="Search"
>
*/