Spaces:
Paused
Paused
File size: 5,130 Bytes
a6b6b45 2a13f0c a6b6b45 2a13f0c a6b6b45 2a13f0c a6b6b45 2a13f0c a6b6b45 2a13f0c a6b6b45 2a13f0c 1f2ba2d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | {% 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 %} |