templates/chat.html

<!-- templates/chat.html -->
{% extends "base.html" %} 

{% block title %}AIAgents | Intelligent Workspace{% endblock %} 

{% block navbar %}{% endblock %}
{% block footer %}{% endblock %}

{% block content %}
<style>
    /* Absolute reset to kill any parent interference */
    * { box-sizing: border-box; }
    html, body { height: 100vh !important; width: 100vw !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #0b0c10 !important; color: #e0e0e0; font-family: 'Inter', sans-serif; }
    header, footer { display: none !important; }
    .page-wrapper { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }

    /* Layout Containers */
    .sidebar-fixed {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        background: #111218;
        border-right: 1px solid #23242b;
        display: flex;
        flex-direction: column;
        z-index: 100;
    }

    .main-header {
        position: fixed;
        top: 0;
        left: 280px;
        right: 0;
        height: 60px;
        background: rgba(11, 12, 16, 0.8);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #23242b;
        display: flex;
        align-items: center;
        padding: 0 30px;
        z-index: 90;
    }

    .input-fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 280px;
        right: 0;
        height: 120px;
        background: #0b0c10;
        border-top: 1px solid #2d2e3b;
        padding: 20px 0;
        z-index: 200;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .messages-viewport {
        position: fixed;
        top: 60px;
        bottom: 140px;
        left: 280px;
        right: 0;
        overflow-y: auto;
        padding: 40px 0;
        display: flex;
        flex-direction: column;
    }

    /* Message UI */
    .message-container { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 20px; }
    .message { display: flex; gap: 20px; margin-bottom: 32px; font-size: 15px; line-height: 1.6; }
    .message-avatar { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; }
    .message.assistant .message-avatar { background: #343541; border: 1px solid #444654; }
    .message.user .message-avatar { background: #6d5dfc; color: white; }
    .message-content { flex: 1; overflow-wrap: break-word; }

    /* Input UI */
    .input-box-wrapper {
        width: 100%;
        max-width: 800px;
        margin: 0 20px;
        background: #23242b;
        border: 1px solid #6d5dfc;
        border-radius: 14px;
        display: flex;
        align-items: flex-end;
        padding: 10px 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }

    .input-box-wrapper textarea {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: white;
        font-size: 15px;
        resize: none;
        max-height: 200px;
        padding: 6px 0;
        font-family: inherit;
    }

    .send-circle {
        width: 34px;
        height: 34px;
        background: #6d5dfc;
        border: none;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: transform 0.1s;
    }
    .send-circle:active { transform: scale(0.95); }

    /* Sidebar Content */
    .sidebar-top { padding: 20px; }
    .btn-create { width: 100%; padding: 12px; background: #6d5dfc; border: none; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .sidebar-main { flex: 1; overflow-y: auto; padding: 0 15px; }
    .nav-label { font-size: 11px; color: #555; text-transform: uppercase; font-weight: 800; margin: 25px 0 10px 8px; }
    .thread-link, .thread-item { padding: 10px 12px; border-radius: 8px; font-size: 14px; color: #888; cursor: pointer; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: all 0.2s; }
    .thread-link:hover, .thread-item:hover { background: #1c1d26; color: #fff; }
    .thread-link.active, .thread-item.active { background: #23242b; color: #6d5dfc; font-weight: 600; }
    
    .delete-thread-btn {
        opacity: 0;
        padding: 4px;
        border-radius: 4px;
        color: #666;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .thread-item:hover .delete-thread-btn { opacity: 1; }
    .delete-thread-btn:hover { background: rgba(248, 113, 113, 0.2); color: #f87171; }
    .sidebar-bottom { padding: 20px; border-top: 1px solid #23242b; }

    /* Modals */
    .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 200; display: flex; align-items: center; justify-content: center; }
    .modal { background: #111218; border: 1px solid #23242b; padding: 30px; border-radius: 20px; width: 420px; }
    .modal input { width: 100%; background: #1c1d26; border: 1px solid #23242b; color: white; padding: 12px; border-radius: 10px; margin: 20px 0; }
    .modal-btns { display: flex; justify-content: flex-end; gap: 12px; }
    .btn { padding: 8px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; }
    .btn-p { background: #6d5dfc; color: white; }
    .btn-s { background: transparent; color: #666; }

    @media (max-width: 800px) {
        .sidebar-fixed { display: none; }
        .main-header, .input-fixed-bottom, .messages-viewport { left: 0; }
    }
</style>

<div class="sidebar-fixed">
    <div class="sidebar-top">
        <button class="btn-create" onclick="createNewThread()">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
            New Chat
        </button>
    </div>
    <div class="sidebar-main">
        <p class="nav-label">Conversations</p>
        <div id="threadsList"></div>
        
        <p class="nav-label">Workspace</p>
        <div class="thread-link" onclick="showUrlModal()">🌐 Web Analysis</div>
        <div class="thread-link" onclick="document.getElementById('fileInput').click()">
            📄 Upload Document
            <input type="file" id="fileInput" style="display: none" onchange="handleFileUpload(event)" />
        </div>
    </div>
    <div class="sidebar-bottom">
        <div style="display: flex; align-items: center; gap: 12px;">
            <div style="width: 36px; height: 36px; background: #6d5dfc; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900;">V</div>
            <div style="font-size: 14px;">Vansh Sharma</div>
        </div>
    </div>
</div>

<div class="main-header">
    <span id="sessionIdDisplay" style="font-size: 13px; color: #666;">Thread ID: ---</span>
</div>

<div class="messages-viewport" id="messagesContainer">
    <!-- Messages injected here -->
</div>

<div class="input-fixed-bottom">
    <div class="input-box-wrapper">
        <textarea id="messageInput" placeholder="Send a message..." rows="1" onkeydown="handleKeyDown(event)" oninput="autoResize(this)"></textarea>
        <button class="send-circle" id="sendBtn" onclick="sendMessage()">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
        </button>
    </div>
</div>

<div class="overlay" id="urlModal" style="display: none">
    <div class="modal">
        <h3 style="margin: 0;">Analyze URL</h3>
        <p style="color: #666; font-size: 13px; margin-top: 8px;">Inject website content into context.</p>
        <input type="url" id="urlInput" placeholder="https://example.com" />
        <div id="urlUploadStatus" style="font-size: 11px; margin-bottom: 10px;"></div>
        <div class="modal-btns">
            <button class="btn btn-s" onclick="hideUrlModal()">Cancel</button>
            <button class="btn btn-p" onclick="handleUrlUpload()">Analyze</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="/static/chat.js"></script>
{% endblock %}