basic chat
This commit is contained in:
Flatlogic Bot
parent
864ef909c8
commit
e4f2931b77
BIN
assets/pasted-20251119-225244-bb3fcbab.png
Normal file
BIN
assets/pasted-20251119-225244-bb3fcbab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
assets/vm-shot-2025-11-19T22-56-10-873Z.jpg
Normal file
BIN
assets/vm-shot-2025-11-19T22-56-10-873Z.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
@ -1,5 +1,4 @@
|
||||
|
||||
{% extends "base_chat.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Chat{% endblock %}
|
||||
@ -34,19 +33,19 @@
|
||||
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
{% for message in selected_conversation.messages.all %}
|
||||
<div class="message {{ message.sender_type }}">
|
||||
<div class="message {% if message.is_from_user %}user{% else %}ai{% endif %}">
|
||||
<div class="message-content">
|
||||
<div class="message-author">{% if message.sender_type == 'user' %}You{% else %}AI{% endif %}</div>
|
||||
<p>{{ message.text|linebreaksbr }}</p>
|
||||
<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">
|
||||
<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"></textarea>
|
||||
<textarea name="text" placeholder="Send a message..." rows="1" id="chat-textarea"></textarea>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -63,20 +62,32 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Auto-scroll to the latest message
|
||||
const messagesContainer = document.getElementById('chat-messages');
|
||||
if (messagesContainer) {
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const messagesContainer = document.getElementById('chat-messages');
|
||||
if (messagesContainer) {
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Auto-resize textarea
|
||||
const textarea = document.querySelector('.chat-form textarea');
|
||||
if (textarea) {
|
||||
textarea.addEventListener('input', () => {
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = (textarea.scrollHeight) + 'px';
|
||||
});
|
||||
}
|
||||
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');
|
||||
|
||||
if (chatTextarea && chatForm) {
|
||||
chatTextarea.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
chatForm.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@ -71,7 +71,7 @@ def chat_view(request, conversation_id=None):
|
||||
text = request.POST.get('text')
|
||||
selected_conversation = get_object_or_404(Conversation, id=conversation_id)
|
||||
if text:
|
||||
Message.objects.create(conversation=selected_conversation, text=text, sender_type='user')
|
||||
Message.objects.create(conversation=selected_conversation, content=text, is_from_user=True)
|
||||
|
||||
try:
|
||||
response = LocalAIApi.create_response({
|
||||
@ -86,7 +86,7 @@ def chat_view(request, conversation_id=None):
|
||||
except Exception as e:
|
||||
ai_text = f"An error occurred: {str(e)}"
|
||||
|
||||
Message.objects.create(conversation=selected_conversation, text=ai_text, sender_type='ai')
|
||||
Message.objects.create(conversation=selected_conversation, content=ai_text, is_from_user=False)
|
||||
|
||||
return redirect('core:chat_detail', conversation_id=selected_conversation.id)
|
||||
|
||||
|
||||
@ -1,21 +1,18 @@
|
||||
/* General Body Styles */
|
||||
/* General App Body & Layout */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
color: #212529;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Main Chat Layout */
|
||||
.chat-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
height: calc(100vh - 120px); /* Adjusted for header/footer */
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
@ -25,12 +22,13 @@ body {
|
||||
border-right: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.new-chat-form {
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.new-chat-form input {
|
||||
@ -39,30 +37,15 @@ body {
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.375rem 0 0 0.375rem;
|
||||
font-size: 0.9rem;
|
||||
background-color: #fff;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.new-chat-form input:focus {
|
||||
outline: none;
|
||||
border-color: #80bdff;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
.new-chat-form button {
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: #007bff;
|
||||
background-color: #0d6efd;
|
||||
color: #fff;
|
||||
border: 1px solid #007bff;
|
||||
border: 1px solid #0d6efd;
|
||||
border-radius: 0 0.375rem 0.375rem 0;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.new-chat-form button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
@ -74,26 +57,20 @@ body {
|
||||
|
||||
.conversation-list a {
|
||||
display: block;
|
||||
padding: 0.85rem 1.25rem;
|
||||
padding: 0.75rem 1rem;
|
||||
color: #495057;
|
||||
text-decoration: none;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.conversation-list a:hover {
|
||||
background-color: #e9ecef;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.conversation-list a.active {
|
||||
background-color: #007bff;
|
||||
background-color: #0d6efd;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Main Content Area */
|
||||
@ -106,35 +83,33 @@ body {
|
||||
|
||||
/* Chat Header */
|
||||
.chat-header {
|
||||
padding: 1rem 2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
background-color: #f8f9fa;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: #343a40;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Message Area */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 75%;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
max-width: 80%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
@ -142,75 +117,49 @@ body {
|
||||
}
|
||||
|
||||
.message.user .message-content {
|
||||
background-color: #007bff;
|
||||
background-color: #0d6efd;
|
||||
color: #fff;
|
||||
border-radius: 0.75rem 0.75rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.message.ai .message-content {
|
||||
background-color: #e9ecef;
|
||||
color: #343a40;
|
||||
border-radius: 0.75rem 0.75rem 0.75rem 0;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.message.user .message-author {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Message Input Form */
|
||||
.chat-form-container {
|
||||
padding: 1.5rem 2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.chat-form {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.chat-form textarea {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
background-color: #fff;
|
||||
color: #495057;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
min-height: 50px;
|
||||
max-height: 200px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.chat-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #80bdff;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
.chat-form button {
|
||||
margin-left: 1rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: #007bff;
|
||||
background-color: #0d6efd;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.chat-form button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Empty State for Chat */
|
||||
@ -220,11 +169,4 @@ body {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: #6c757d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-conversation-selected h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
@ -1,21 +1,18 @@
|
||||
/* General Body Styles */
|
||||
/* General App Body & Layout */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
color: #212529;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Main Chat Layout */
|
||||
.chat-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
height: calc(100vh - 120px); /* Adjusted for header/footer */
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
@ -25,12 +22,13 @@ body {
|
||||
border-right: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.new-chat-form {
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.new-chat-form input {
|
||||
@ -39,30 +37,15 @@ body {
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.375rem 0 0 0.375rem;
|
||||
font-size: 0.9rem;
|
||||
background-color: #fff;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.new-chat-form input:focus {
|
||||
outline: none;
|
||||
border-color: #80bdff;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
.new-chat-form button {
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: #007bff;
|
||||
background-color: #0d6efd;
|
||||
color: #fff;
|
||||
border: 1px solid #007bff;
|
||||
border: 1px solid #0d6efd;
|
||||
border-radius: 0 0.375rem 0.375rem 0;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.new-chat-form button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
@ -74,26 +57,20 @@ body {
|
||||
|
||||
.conversation-list a {
|
||||
display: block;
|
||||
padding: 0.85rem 1.25rem;
|
||||
padding: 0.75rem 1rem;
|
||||
color: #495057;
|
||||
text-decoration: none;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.conversation-list a:hover {
|
||||
background-color: #e9ecef;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.conversation-list a.active {
|
||||
background-color: #007bff;
|
||||
background-color: #0d6efd;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Main Content Area */
|
||||
@ -106,35 +83,33 @@ body {
|
||||
|
||||
/* Chat Header */
|
||||
.chat-header {
|
||||
padding: 1rem 2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
background-color: #f8f9fa;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: #343a40;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Message Area */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 75%;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
max-width: 80%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
@ -142,75 +117,49 @@ body {
|
||||
}
|
||||
|
||||
.message.user .message-content {
|
||||
background-color: #007bff;
|
||||
background-color: #0d6efd;
|
||||
color: #fff;
|
||||
border-radius: 0.75rem 0.75rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.message.ai .message-content {
|
||||
background-color: #e9ecef;
|
||||
color: #343a40;
|
||||
border-radius: 0.75rem 0.75rem 0.75rem 0;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.message.user .message-author {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Message Input Form */
|
||||
.chat-form-container {
|
||||
padding: 1.5rem 2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.chat-form {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.chat-form textarea {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
background-color: #fff;
|
||||
color: #495057;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
min-height: 50px;
|
||||
max-height: 200px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.chat-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #80bdff;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
.chat-form button {
|
||||
margin-left: 1rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: #007bff;
|
||||
background-color: #0d6efd;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.chat-form button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Empty State for Chat */
|
||||
@ -220,11 +169,4 @@ body {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: #6c757d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-conversation-selected h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user