basic chat
This commit is contained in:
Flatlogic Bot
parent
330b813563
commit
864ef909c8
BIN
ai/__pycache__/__init__.cpython-311.pyc
Normal file
BIN
ai/__pycache__/__init__.cpython-311.pyc
Normal file
Binary file not shown.
BIN
ai/__pycache__/local_ai_api.cpython-311.pyc
Normal file
BIN
ai/__pycache__/local_ai_api.cpython-311.pyc
Normal file
Binary file not shown.
BIN
assets/pasted-20251119-223636-11a12b2c.png
Normal file
BIN
assets/pasted-20251119-223636-11a12b2c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
assets/pasted-20251119-224750-5fe94e0e.png
Normal file
BIN
assets/pasted-20251119-224750-5fe94e0e.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
32
core/migrations/0004_conversation_message.py
Normal file
32
core/migrations/0004_conversation_message.py
Normal file
@ -0,0 +1,32 @@
|
||||
# Generated by Django 5.2.7 on 2025-11-19 22:34
|
||||
|
||||
import django.db.models.deletion
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('core', '0003_todoitem_description_todoitem_tags'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.CreateModel(
|
||||
name='Conversation',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('title', models.CharField(max_length=200)),
|
||||
('created_at', models.DateTimeField(auto_now_add=True)),
|
||||
],
|
||||
),
|
||||
migrations.CreateModel(
|
||||
name='Message',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('content', models.TextField()),
|
||||
('is_from_user', models.BooleanField(default=True)),
|
||||
('created_at', models.DateTimeField(auto_now_add=True)),
|
||||
('conversation', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='messages', to='core.conversation')),
|
||||
],
|
||||
),
|
||||
]
|
||||
Binary file not shown.
@ -24,3 +24,19 @@ class TodoItem(models.Model):
|
||||
|
||||
def __str__(self):
|
||||
return self.title
|
||||
|
||||
class Conversation(models.Model):
|
||||
title = models.CharField(max_length=200)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
|
||||
def __str__(self):
|
||||
return self.title
|
||||
|
||||
class Message(models.Model):
|
||||
conversation = models.ForeignKey(Conversation, on_delete=models.CASCADE, related_name='messages')
|
||||
content = models.TextField()
|
||||
is_from_user = models.BooleanField(default=True)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
|
||||
def __str__(self):
|
||||
return f"Message from {'User' if self.is_from_user else 'AI'} at {self.created_at}"
|
||||
@ -15,17 +15,20 @@
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="{% url 'index' %}">AI Task Manager</a>
|
||||
<a class="navbar-brand" href="{% url 'core:index' %}">AI Task Manager</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'index' %}">Table View</a>
|
||||
<a class="nav-link" href="{% url 'core:index' %}">Table View</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'kanban_board' %}">Kanban Board</a>
|
||||
<a class="nav-link" href="{% url 'core:kanban' %}">Kanban Board</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'core:chat' %}">Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
19
core/templates/base_chat.html
Normal file
19
core/templates/base_chat.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Gemini Chat{% endblock %}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Poppins:wght@600&display=swap" rel="stylesheet">
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ timestamp }}">
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
82
core/templates/core/chat.html
Normal file
82
core/templates/core/chat.html
Normal file
@ -0,0 +1,82 @@
|
||||
|
||||
{% extends "base_chat.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 {{ message.sender_type }}">
|
||||
<div class="message-content">
|
||||
<div class="message-author">{% if message.sender_type == 'user' %}You{% else %}AI{% endif %}</div>
|
||||
<p>{{ message.text|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">
|
||||
{% csrf_token %}
|
||||
<textarea name="text" placeholder="Send a message..." rows="1"></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 %}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Auto-scroll to the latest message
|
||||
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';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
78
core/templates/core/conversation_list.html
Normal file
78
core/templates/core/conversation_list.html
Normal file
@ -0,0 +1,78 @@
|
||||
|
||||
{% extends "base_chat.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Chat{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="chat-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="chat-sidebar">
|
||||
<a href="{% url 'conversation_list' %}" class="new-chat-btn">+ New Chat</a>
|
||||
|
||||
<ul class="conversation-list">
|
||||
{% for conv in conversation_list %}
|
||||
<a href="{% url 'conversation_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 {{ message.sender_type }}">
|
||||
<div class="message-content">
|
||||
<div class="message-author">{% if message.sender_type == 'user' %}You{% else %}AI{% endif %}</div>
|
||||
<p>{{ message.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="chat-form-container">
|
||||
<form method="post" action="{% url 'conversation_detail' selected_conversation.id %}" class="chat-form">
|
||||
{% csrf_token %}
|
||||
<textarea name="text" placeholder="Send a message..." rows="1"></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 %}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Auto-scroll to the latest message
|
||||
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';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
15
core/urls.py
15
core/urls.py
@ -1,10 +1,13 @@
|
||||
from django.urls import path
|
||||
from . import views
|
||||
|
||||
from .views import index, article_detail, kanban_board, update_task_status
|
||||
app_name = 'core'
|
||||
|
||||
urlpatterns = [
|
||||
path("", index, name="index"),
|
||||
path("kanban/", kanban_board, name="kanban_board"),
|
||||
path("article/<int:article_id>/", article_detail, name="article_detail"),
|
||||
path('update_task_status/', update_task_status, name='update_task_status'),
|
||||
]
|
||||
path("", views.index, name="index"),
|
||||
path('kanban/', views.kanban_board, name='kanban'),
|
||||
path('article/<int:article_id>/', views.article_detail, name='article_detail'),
|
||||
path('update_task_status/', views.update_task_status, name='update_task_status'),
|
||||
path('chat/', views.chat_view, name='chat'),
|
||||
path('chat/<int:conversation_id>/', views.chat_view, name='chat_detail'),
|
||||
]
|
||||
@ -2,9 +2,10 @@ from django.shortcuts import render, redirect, get_object_or_404
|
||||
from django.http import JsonResponse
|
||||
from django.views.decorators.http import require_POST
|
||||
import json
|
||||
from .models import Article, TodoItem
|
||||
from .models import Article, TodoItem, Conversation, Message
|
||||
from .forms import TodoItemForm
|
||||
import time
|
||||
from ai.local_ai_api import LocalAIApi
|
||||
|
||||
def index(request):
|
||||
if request.method == 'POST':
|
||||
@ -57,4 +58,45 @@ def update_task_status(request):
|
||||
|
||||
return JsonResponse({'success': True})
|
||||
except (json.JSONDecodeError, TypeError, ValueError) as e:
|
||||
return JsonResponse({'success': False, 'error': str(e)}, status=400)
|
||||
return JsonResponse({'success': False, 'error': str(e)}, status=400)
|
||||
|
||||
def chat_view(request, conversation_id=None):
|
||||
if request.method == 'POST':
|
||||
if 'title' in request.POST:
|
||||
title = request.POST.get('title', 'New Conversation')
|
||||
conversation = Conversation.objects.create(title=title)
|
||||
return redirect('core:chat_detail', conversation_id=conversation.id)
|
||||
|
||||
elif 'text' in request.POST and conversation_id:
|
||||
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')
|
||||
|
||||
try:
|
||||
response = LocalAIApi.create_response({
|
||||
"input": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": text}
|
||||
]
|
||||
})
|
||||
ai_text = LocalAIApi.extract_text(response)
|
||||
if not ai_text:
|
||||
ai_text = "I couldn't process that. Please try again."
|
||||
except Exception as e:
|
||||
ai_text = f"An error occurred: {str(e)}"
|
||||
|
||||
Message.objects.create(conversation=selected_conversation, text=ai_text, sender_type='ai')
|
||||
|
||||
return redirect('core:chat_detail', conversation_id=selected_conversation.id)
|
||||
|
||||
conversations = Conversation.objects.order_by('-created_at')
|
||||
selected_conversation = None
|
||||
if conversation_id:
|
||||
selected_conversation = get_object_or_404(Conversation, id=conversation_id)
|
||||
|
||||
return render(request, 'core/chat.html', {
|
||||
'conversation_list': conversations,
|
||||
'selected_conversation': selected_conversation,
|
||||
'timestamp': int(time.time()),
|
||||
})
|
||||
|
||||
@ -1,182 +1,230 @@
|
||||
/* custom.css */
|
||||
|
||||
:root {
|
||||
--primary-color: #1A202C;
|
||||
--secondary-color: #F7FAFC;
|
||||
--accent-color: #4299E1;
|
||||
--font-family-headings: 'Poppins', sans-serif;
|
||||
--font-family-body: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* General Body Styles */
|
||||
body {
|
||||
font-family: var(--font-family-body);
|
||||
background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-family-headings);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-section .display-4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
color: #555;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #3182ce; /* A slightly darker shade of accent */
|
||||
border-color: #2c73b9;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 0.25rem rgba(66, 153, 225, 0.25);
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: 600;
|
||||
color: #4a5568;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.4em 0.7em;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-todo {
|
||||
background-color: #e2e8f0;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.status-inprogress {
|
||||
background-color: #bee3f8;
|
||||
color: #2c5282;
|
||||
}
|
||||
|
||||
.status-blocked {
|
||||
background-color: #fed7d7;
|
||||
color: #9b2c2c;
|
||||
}
|
||||
|
||||
.status-done {
|
||||
background-color: #c6f6d5;
|
||||
color: #2f855a;
|
||||
}
|
||||
|
||||
/* Kanban Board Styles */
|
||||
.kanban-board-container {
|
||||
overflow-x: auto;
|
||||
padding: 1.5rem;
|
||||
background-color: #e9ecef; /* Light grey background for the container */
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 280px; /* Fixed width for each column */
|
||||
gap: 1.5rem;
|
||||
padding-bottom: 1rem; /* For scrollbar spacing */
|
||||
}
|
||||
|
||||
.kanban-column {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
max-width: 300px;
|
||||
background-color: #f7fafc;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
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;
|
||||
}
|
||||
|
||||
.kanban-column .h5 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kanban-cards {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 60vh; /* Adjust as needed */
|
||||
}
|
||||
|
||||
.kanban-card {
|
||||
cursor: grab;
|
||||
transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.kanban-card:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.kanban-card .card-title {
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.kanban-card .tags {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.loader-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* Main Chat Layout */
|
||||
.chat-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.chat-sidebar {
|
||||
width: 280px;
|
||||
background-color: #f8f9fa;
|
||||
border-right: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.new-chat-form {
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.new-chat-form input {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
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;
|
||||
color: #fff;
|
||||
border: 1px solid #007bff;
|
||||
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 {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.conversation-list a {
|
||||
display: block;
|
||||
padding: 0.85rem 1.25rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.conversation-list a:hover {
|
||||
background-color: #e9ecef;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.conversation-list a.active {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Main Content Area */
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Chat Header */
|
||||
.chat-header {
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.chat-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
/* Message Area */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 75%;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message.user .message-content {
|
||||
background-color: #007bff;
|
||||
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);
|
||||
}
|
||||
|
||||
/* Message Input Form */
|
||||
.chat-form-container {
|
||||
padding: 1.5rem 2rem;
|
||||
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;
|
||||
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;
|
||||
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 */
|
||||
.no-conversation-selected {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: #6c757d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 8px solid #f3f3f3;
|
||||
border-top: 8px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
.no-conversation-selected h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
@ -1,182 +1,230 @@
|
||||
/* custom.css */
|
||||
|
||||
:root {
|
||||
--primary-color: #1A202C;
|
||||
--secondary-color: #F7FAFC;
|
||||
--accent-color: #4299E1;
|
||||
--font-family-headings: 'Poppins', sans-serif;
|
||||
--font-family-body: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* General Body Styles */
|
||||
body {
|
||||
font-family: var(--font-family-body);
|
||||
background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-family-headings);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-section .display-4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
color: #555;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #3182ce; /* A slightly darker shade of accent */
|
||||
border-color: #2c73b9;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 0.25rem rgba(66, 153, 225, 0.25);
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: 600;
|
||||
color: #4a5568;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.4em 0.7em;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-todo {
|
||||
background-color: #e2e8f0;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.status-inprogress {
|
||||
background-color: #bee3f8;
|
||||
color: #2c5282;
|
||||
}
|
||||
|
||||
.status-blocked {
|
||||
background-color: #fed7d7;
|
||||
color: #9b2c2c;
|
||||
}
|
||||
|
||||
.status-done {
|
||||
background-color: #c6f6d5;
|
||||
color: #2f855a;
|
||||
}
|
||||
|
||||
/* Kanban Board Styles */
|
||||
.kanban-board-container {
|
||||
overflow-x: auto;
|
||||
padding: 1.5rem;
|
||||
background-color: #e9ecef; /* Light grey background for the container */
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 280px; /* Fixed width for each column */
|
||||
gap: 1.5rem;
|
||||
padding-bottom: 1rem; /* For scrollbar spacing */
|
||||
}
|
||||
|
||||
.kanban-column {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
max-width: 300px;
|
||||
background-color: #f7fafc;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
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;
|
||||
}
|
||||
|
||||
.kanban-column .h5 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kanban-cards {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 60vh; /* Adjust as needed */
|
||||
}
|
||||
|
||||
.kanban-card {
|
||||
cursor: grab;
|
||||
transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.kanban-card:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.kanban-card .card-title {
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.kanban-card .tags {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.loader-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* Main Chat Layout */
|
||||
.chat-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.chat-sidebar {
|
||||
width: 280px;
|
||||
background-color: #f8f9fa;
|
||||
border-right: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.new-chat-form {
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.new-chat-form input {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
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;
|
||||
color: #fff;
|
||||
border: 1px solid #007bff;
|
||||
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 {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.conversation-list a {
|
||||
display: block;
|
||||
padding: 0.85rem 1.25rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.conversation-list a:hover {
|
||||
background-color: #e9ecef;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.conversation-list a.active {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Main Content Area */
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Chat Header */
|
||||
.chat-header {
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.chat-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
/* Message Area */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 75%;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message.user .message-content {
|
||||
background-color: #007bff;
|
||||
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);
|
||||
}
|
||||
|
||||
/* Message Input Form */
|
||||
.chat-form-container {
|
||||
padding: 1.5rem 2rem;
|
||||
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;
|
||||
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;
|
||||
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 */
|
||||
.no-conversation-selected {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: #6c757d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 8px solid #f3f3f3;
|
||||
border-top: 8px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
.no-conversation-selected h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user