llm_answer.html

<div class="search-assist-container" id="llm-answer-{{ answer.uuid }}">
    <!-- Header -->
    <div class="assist-header">
        <div class="assist-title">
            <span>
                <svg width="20" height="20" viewBox="0 0 640 640" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                    style="margin-right: 8px; vertical-align: text-bottom;">
                    <path
                        d="M112 120C112 106.7 101.3 96 88 96C74.7 96 64 106.7 64 120L64 464C64 508.2 99.8 544 144 544L552 544C565.3 544 576 533.3 576 520C576 506.7 565.3 496 552 496L144 496C126.3 496 112 481.7 112 464L112 120zM216 192L424 192C437.3 192 448 181.3 448 168C448 154.7 437.3 144 424 144L216 144C202.7 144 192 154.7 192 168C192 181.3 202.7 192 216 192zM216 256C202.7 256 192 266.7 192 280C192 293.3 202.7 304 216 304L360 304C373.3 304 384 293.3 384 280C384 266.7 373.3 256 360 256L216 256zM216 368C202.7 368 192 378.7 192 392C192 405.3 202.7 416 216 416L488 416C501.3 416 512 405.3 512 392C512 378.7 501.3 368 488 368L216 368z" />
                </svg>
                Search Assist
                <small class="context-badge"></small>
            </span>
        </div>
        <div class="assist-icons">
            <svg class="icon-info" width="20" height="20" viewBox="0 0 640 640" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg" title="Information about this AI-generated answer.">
                <path
                    d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z" />
            </svg>

        </div>
    </div>

    <!-- Collapsible Content -->
    <div class="assist-content-wrapper">
        <div class="assist-content">
            {{ answer.answer|safe }}
        </div>
    </div>

    <!-- Toggle Button -->
    <div class="assist-toggle-container">
        <button class="assist-toggle-button">
            <span>More</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </button>
    </div>

    <!-- Footer -->
    <div class="assist-footer">
        <span>Auto-generated based on listed sources. May contain inaccuracies.</span>
        <div class="assist-feedback">
            <span>Was this helpful?</span>
            <svg width="18" height="18" viewBox="0 0 640 640" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                class="feedback-icon" title="Helpful">
                <path
                    d="M144 224C161.7 224 176 238.3 176 256L176 512C176 529.7 161.7 544 144 544L96 544C78.3 544 64 529.7 64 512L64 256C64 238.3 78.3 224 96 224L144 224zM334.6 80C361.9 80 384 102.1 384 129.4L384 133.6C384 140.4 382.7 147.2 380.2 153.5L352 224L512 224C538.5 224 560 245.5 560 272C560 291.7 548.1 308.6 531.1 316C548.1 323.4 560 340.3 560 360C560 383.4 543.2 402.9 521 407.1C525.4 414.4 528 422.9 528 432C528 454.2 513 472.8 492.6 478.3C494.8 483.8 496 489.8 496 496C496 522.5 474.5 544 448 544L360.1 544C323.8 544 288.5 531.6 260.2 508.9L248 499.2C232.8 487.1 224 468.7 224 449.2L224 262.6C224 247.7 227.5 233 234.1 219.7L290.3 107.3C298.7 90.6 315.8 80 334.6 80z" />
            </svg>
            <svg width="18" height="18" viewBox="0 0 640 640" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                class="feedback-icon" title="Not helpful">
                <path
                    d="M448 96C474.5 96 496 117.5 496 144C496 150.3 494.7 156.2 492.6 161.7C513 167.2 528 185.8 528 208C528 217.1 525.4 225.6 521 232.9C543.2 237.1 560 256.6 560 280C560 299.7 548.1 316.6 531.1 324C548.1 331.4 560 348.3 560 368C560 394.5 538.5 416 512 416L352 416L380.2 486.4C382.7 492.7 384 499.5 384 506.3L384 510.5C384 537.8 361.9 559.9 334.6 559.9C315.9 559.9 298.8 549.3 290.4 532.6L234.1 420.3C227.4 407 224 392.3 224 377.4L224 190.8C224 171.4 232.9 153 248 140.8L260.2 131.1C288.6 108.4 323.8 96 360.1 96L448 96zM144 160C161.7 160 176 174.3 176 192L176 448C176 465.7 161.7 480 144 480L96 480C78.3 480 64 465.7 64 448L64 192C64 174.3 78.3 160 96 160L144 160z" />
            </svg>
        </div>
    </div>
</div>

<!-- Modal Structure -->
<div id="info-modal-{{ answer.uuid }}" class="assist-modal">
    <div class="assist-modal-content">
        <span class="assist-modal-close">&times;</span>
        <h2>About this Answer</h2>
        <p>This answer was generated by an AI assistant to provide a quick summary based on search results.</p>
        <ul>
            <li><strong>Model Used:</strong> <span class="modal-model-name">Not specified</span></li>
            <li><strong>Plugin Source:</strong> <a href="https://github.com/bearlike/scripts"
                    target="_blank">bearlike/scripts</a></li>
        </ul>
        <p class="disclaimer">Please be aware that AI-generated content may contain inaccuracies. Always verify
            important information from the source links.</p>
    </div>
</div>

<style>
    .search-assist-container {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background-color: rgb(35, 37, 42);
        color: #e0e0e0;
        border-radius: 12px;
        padding: 16px;
        margin: 16px 0;
        border: 1px solid #444;
    }

    /* Header */
    .assist-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .assist-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        font-size: 1.1em;
        color: #f0f0f0;
    }

    .assist-title .context-badge {
        font-size: 0.8em;
        font-weight: 400;
        color: #aaa;
        margin-left: 4px;
    }

    .assist-icons {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #aaa;
    }

    .assist-icons svg {
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .assist-icons svg:hover {
        color: #fff;
    }

    /* Content */
    .assist-content-wrapper {
        max-height: 120px;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        position: relative;
    }

    .assist-content-wrapper.expanded {
        max-height: 2000px;
    }

    .assist-content-wrapper:not(.expanded)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(to top, rgb(35, 37, 42), transparent);
        pointer-events: none;
    }

    .assist-content {
        line-height: 1.5;
        padding-bottom: 8px;
    }

    /* Markdown Rendered Content */
    .assist-content h1,
    .assist-content h2,
    .assist-content h3,
    .assist-content h4,
    .assist-content h5,
    .assist-content h6 {
        margin-top: 0.6em;
        margin-bottom: 0.4em;
        line-height: 1.2;
        font-weight: 600;
    }

    .assist-content p {
        margin-block-start: 0.5em;
        margin-block-end: 0.5em;
    }

    .assist-content ul,
    .assist-content ol {
        margin-block-start: 0.5em;
        margin-block-end: 0.5em;
        padding-inline-start: 30px;
    }

    .assist-content li {
        margin-bottom: 0.3em;
    }

    .assist-content pre {
        margin-block-start: 0.8em;
        margin-block-end: 0.8em;
    }

    .assist-content code {
        font-size: 0.9em;
        padding: 0.1em 0.3em;
        border-radius: 4px;
        background-color: #2b2d31;
    }

    .assist-content pre code {
        display: block;
        padding: 0.8em;
        border-radius: 6px;
        background-color: #1e1e1e;
    }

    /* Toggle Button */
    .assist-toggle-container {
        text-align: center;
        margin-top: 8px;
        border-bottom: 1px solid #444;
        padding-bottom: 16px;
        margin-bottom: 12px;
    }

    .assist-toggle-button {
        background-color: #3a3f44;
        color: #e0e0e0;
        border: 1px solid #555;
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 0.9em;
        font-weight: 500;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .assist-toggle-button:hover {
        background-color: #4a4f54;
    }

    .assist-toggle-button svg {
        transition: transform 0.3s ease;
    }

    .assist-toggle-button.expanded svg {
        transform: rotate(180deg);
    }

    /* Footer */
    .assist-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8em;
        color: #aaa;
        flex-wrap: wrap;
        gap: 8px;
    }

    .assist-feedback {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .assist-feedback .feedback-icon {
        cursor: pointer;
        padding: 2px;
        border-radius: 4px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .assist-feedback .feedback-icon:hover {
        background-color: #4a4f54;
        color: #fff;
    }

    /* Modal Styles */
    .assist-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
        animation: fadeIn 0.3s;
    }

    .assist-modal-content {
        background-color: #2b2d31;
        margin: 15% auto;
        padding: 25px;
        border: 1px solid #555;
        border-radius: 12px;
        width: 80%;
        max-width: 500px;
        position: relative;
        animation: slideIn 0.3s;
    }

    .assist-modal-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.2s;
    }

    .assist-modal-close:hover,
    .assist-modal-close:focus {
        color: #fff;
    }

    .assist-modal-content h2 {
        margin-top: 0;
        color: #f0f0f0;
    }

    .assist-modal-content p {
        color: #ccc;
    }

    .assist-modal-content ul {
        list-style-type: none;
        padding-left: 0;
    }

    .assist-modal-content li {
        background-color: #33363a;
        margin-bottom: 8px;
        padding: 10px;
        border-radius: 6px;
    }

    .assist-modal-content a {
        color: #4e9af1;
        text-decoration: none;
    }

    .assist-modal-content a:hover {
        text-decoration: underline;
    }

    .assist-modal-content .disclaimer {
        font-size: 0.9em;
        color: #aaa;
        border-top: 1px solid #444;
        padding-top: 15px;
        margin-top: 15px;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideIn {
        from {
            transform: translateY(-50px);
            opacity: 0
        }

        to {
            transform: translateY(0);
            opacity: 1
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Unique ID for the container to scope the script
        const containerId = "llm-answer-{{ answer.uuid }}";
        const container = document.getElementById(containerId);

        if (container) {
            // Extract data from the first div with data attributes in the answer content
            const dataDiv = container.querySelector('.assist-content [data-model-name]');
            const modelName = dataDiv ? dataDiv.getAttribute('data-model-name') : 'Not specified';
            const hasContext = dataDiv ? dataDiv.getAttribute('data-has-context') === 'true' : false;

            // Update the header badge based on context
            const contextBadge = container.querySelector('.context-badge');
            if (hasContext) {
                contextBadge.textContent = '(with search context)';
            } else {
                contextBadge.textContent = '(general knowledge)';
            }

            // Update the modal with the model name
            const modal = document.getElementById("info-modal-{{ answer.uuid }}");
            const modelNameSpan = modal.querySelector('.modal-model-name');
            if (modelNameSpan) {
                modelNameSpan.textContent = modelName;
            }

            // --- Collapsible Logic ---
            const contentWrapper = container.querySelector('.assist-content-wrapper');
            const content = container.querySelector('.assist-content');
            const toggleButton = container.querySelector('.assist-toggle-button');
            const toggleContainer = container.querySelector('.assist-toggle-container');

            requestAnimationFrame(() => {
                if (content.scrollHeight <= contentWrapper.clientHeight) {
                    toggleContainer.style.display = 'none';
                    contentWrapper.style.maxHeight = 'none';
                } else {
                    toggleContainer.style.display = 'block';
                }
            });

            toggleButton.addEventListener('click', () => {
                const isExpanded = contentWrapper.classList.toggle('expanded');
                toggleButton.classList.toggle('expanded', isExpanded);
                toggleButton.querySelector('span').textContent = isExpanded ? 'Less' : 'More';
            });

            // --- Modal Logic ---
            const infoIcon = container.querySelector('.icon-info');
            const closeButton = modal.querySelector('.assist-modal-close');

            infoIcon.onclick = () => { modal.style.display = "block"; }
            closeButton.onclick = () => { modal.style.display = "none"; }

            window.onclick = (event) => {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }
    });
</script>