105 lines
3.8 KiB
HTML
105 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Chat{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="chat-container">
|
|
<!-- Sidebar -->
|
|
<aside class="chat-sidebar">
|
|
<form method="post" action="{% url 'core:chat' %}" class="new-chat-form">
|
|
{% csrf_token %}
|
|
<input type="text" name="title" placeholder="New conversation title" required>
|
|
<button type="submit" class="new-chat-btn">+ New Chat</button>
|
|
</form>
|
|
|
|
<ul class="conversation-list">
|
|
{% for conv in conversation_list %}
|
|
<a href="{% url 'core:chat_detail' conv.id %}" class="{% if selected_conversation.id == conv.id %}active{% endif %}">
|
|
{{ conv.title }}
|
|
</a>
|
|
{% empty %}
|
|
<li>No conversations yet.</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</aside>
|
|
|
|
<!-- Main Chat Area -->
|
|
<main class="chat-main">
|
|
{% if selected_conversation %}
|
|
<header class="chat-header">
|
|
<h3>{{ selected_conversation.title }}</h3>
|
|
</header>
|
|
|
|
<div class="chat-messages" id="chat-messages">
|
|
{% for message in selected_conversation.messages.all %}
|
|
<div class="message {% if message.is_from_user %}user{% else %}ai{% endif %}">
|
|
<div class="message-content">
|
|
<div class="message-author">{% if message.is_from_user %}You{% else %}AI{% endif %}</div>
|
|
<p>{{ message.content|linebreaksbr }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="chat-form-container">
|
|
<form method="post" action="{% url 'core:chat_detail' selected_conversation.id %}" class="chat-form" id="chat-form">
|
|
{% csrf_token %}
|
|
<textarea name="text" placeholder="Send a message..." rows="1" id="chat-textarea"></textarea>
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
|
|
{% else %}
|
|
<div class="no-conversation-selected">
|
|
<div>
|
|
<h2>Gemini Chat</h2>
|
|
<p>Select a conversation or start a new one.</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="loader-overlay" id="loader-overlay" style="display: none;">
|
|
<div class="loader"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const messagesContainer = document.getElementById('chat-messages');
|
|
if (messagesContainer) {
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
}
|
|
|
|
const textarea = document.getElementById('chat-textarea');
|
|
if (textarea) {
|
|
textarea.addEventListener('input', () => {
|
|
textarea.style.height = 'auto';
|
|
textarea.style.height = (textarea.scrollHeight) + 'px';
|
|
});
|
|
}
|
|
|
|
const chatTextarea = document.getElementById('chat-textarea');
|
|
const chatForm = document.getElementById('chat-form');
|
|
const loaderOverlay = document.getElementById('loader-overlay');
|
|
|
|
if (chatForm) {
|
|
chatForm.addEventListener('submit', function() {
|
|
if (loaderOverlay) {
|
|
loaderOverlay.style.display = 'flex';
|
|
}
|
|
});
|
|
}
|
|
|
|
if (chatTextarea && chatForm) {
|
|
chatTextarea.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
chatForm.submit();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |