templates/chat.html

{% extends 'base.html' %}

{% block content %}
<div class="row h-100 g-4">
    
    <!-- Left Pane: Active Chat Interaction -->
    <div class="col-lg-5">
        <div class="card h-100 shadow">
            <div class="card-header bg-transparent border-0 pt-4 pb-2">
                <h4 class="card-title d-flex align-items-center gap-2">
                    <i class="bi bi-robot text-primary"></i> Ask Document AI
                </h4>
                <p class="text-muted small mb-0">Query your selected vector database.</p>
            </div>
            
            <div class="card-body d-flex flex-column p-4">
                
                <!-- Input Form -->
                <form method="POST" action="{{ url_for('chat') }}" class="mb-4">
                    <div class="form-group mb-3">
                        <textarea name="query_text" rows="3" class="form-control" 
                            placeholder="Type your question here..." required>{{ query_text }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2">
                        <i class="bi bi-send"></i> Submit Query
                    </button>
                </form>

                <!-- Current Answer Display -->
                {% if answer %}
                <div class="current-answer-wrapper flex-grow-1">
                    <div class="d-flex align-items-center gap-2 mb-2 text-primary">
                        <i class="bi bi-stars"></i> <h6 class="mb-0 fw-bold">AI Response</h6>
                    </div>
                    <div class="answer-box p-4 rounded bg-dark border border-primary">
                        {{ answer }}
                    </div>
                </div>
                {% endif %}

            </div>
        </div>
    </div>

    <!-- Right Pane: Chat History -->
    <div class="col-lg-7">
        <div class="card h-100 shadow d-flex flex-column">
            <div class="card-header bg-transparent border-bottom pt-4 pb-3">
                <h5 class="card-title mb-0 d-flex align-items-center gap-2">
                    <i class="bi bi-clock-history text-muted"></i> Conversation History
                </h5>
            </div>
            
            <div class="card-body p-4 history-scroll-area flex-grow-1" style="max-height: 70vh; overflow-y: auto;">
                {% if history %}
                    <div class="d-flex flex-column gap-4">
                        {% for question, ans in history %}
                        <div class="history-pair">
                            <!-- User Question Bubble -->
                            <div class="d-flex justify-content-end mb-2">
                                <div class="query-bubble p-3 rounded-4 bg-primary text-white" style="max-width: 85%; border-bottom-right-radius: 4px !important;">
                                    <strong><i class="bi bi-person me-1"></i> You:</strong><br>
                                    {{ question }}
                                </div>
                            </div>
                            <!-- AI Answer Bubble -->
                            <div class="d-flex justify-content-start">
                                <div class="answer-bubble p-3 rounded-4 bg-dark text-light border border-secondary" style="max-width: 85%; border-top-left-radius: 4px !important;">
                                    <strong><i class="bi bi-robot me-1 text-primary"></i> AI:</strong><br>
                                    {{ ans }}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted opacity-50">
                        <i class="bi bi-chat-left text-muted mb-3" style="font-size: 3rem;"></i>
                        <p>Your conversation history will appear here.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<style>
    .answer-box {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
        border-color: rgba(59, 130, 246, 0.3) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        line-height: 1.6;
        font-size: 1.05rem;
    }

    .query-bubble {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .answer-bubble {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }

    /* History Scrollbar Tweaks */
    .history-scroll-area::-webkit-scrollbar {
        width: 6px;
    }
    .history-scroll-area::-webkit-scrollbar-track {
        background: transparent;
    }
    .history-scroll-area::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 10px;
    }
</style>
{% endblock %}