fix: ajustes de layout

This commit is contained in:
Ricardo Carneiro 2025-06-09 23:11:56 -03:00
parent 653de55fb4
commit 393f40fa41
4 changed files with 97 additions and 42 deletions

View File

@ -30,12 +30,23 @@
margin-top: 0.5rem; margin-top: 0.5rem;
color: #666; color: #666;
} }
.message-input {
resize: none;
transition: all 0.3s ease;
min-height: 40px;
max-height: 200px;
}
.message-input:focus {
min-height: 60px;
}
</style> </style>
} }
<div class="container-fluid bg-light"> <div class="container-fluid bg-light main-content">
<div class="row h-100"> <div class="row h-100">
<div class="col-md-10 mx-auto"> <div class="col-md-12 mx-auto">
<div class="card shadow-sm my-4" style="background-color: #f8fff8;"> <div class="card shadow-sm my-4" style="background-color: #f8fff8;">
<div class="card-body"> <div class="card-body">
<div id="chat-messages" class="mb-4" style="height: 350px; overflow-y: auto;"> <div id="chat-messages" class="mb-4" style="height: 350px; overflow-y: auto;">
@ -47,7 +58,7 @@
<div class="input-group"> <div class="input-group">
<textarea id="message-input" class="form-control" <textarea id="message-input" class="form-control"
placeholder="Digite sua mensagem... Use **texto** para negrito" placeholder="Digite sua mensagem... Use **texto** para negrito"
rows="3" required></textarea> rows="1" required></textarea>
<button type="button" class="btn btn-outline-secondary file-upload-button"> <button type="button" class="btn btn-outline-secondary file-upload-button">
<i class="bi bi-paperclip"></i> <i class="bi bi-paperclip"></i>
<input type="file" id="file-input" accept="application/pdf,image/png" multiple> <input type="file" id="file-input" accept="application/pdf,image/png" multiple>
@ -96,10 +107,10 @@
- Abrir uma solicitação ao RH no Pipefy - Abrir uma solicitação ao RH no Pipefy
- Ou simplesmente perguntar qualquer coisa. - Ou simplesmente perguntar qualquer coisa.
Use **negrito** para destacar texto importante. Use **negrito** para destacar texto importante.
Para código, use \\\`\\\`\\\`linguagem Para código, use \\\`\\\`\\\`linguagem
seu código seu código
\\\`\\\`\\\``; \\\`\\\`\\\``;
function appendMessage(message, isUser = true) { function appendMessage(message, isUser = true) {
const messageDiv = $('<div>').addClass('chat-message ' + (isUser ? 'user-message' : 'bot-message')); const messageDiv = $('<div>').addClass('chat-message ' + (isUser ? 'user-message' : 'bot-message'));
@ -190,7 +201,12 @@ seu código
); );
}); });
// Send message handling $("#message-input").keypress(function (e) {
if (e.which === 13) {
$("#send-message").click();
}
});
$('#send-message').on('click', async function (e) { $('#send-message').on('click', async function (e) {
e.preventDefault(); e.preventDefault();
const message = messageInput.val().trim(); const message = messageInput.val().trim();

View File

@ -16,7 +16,9 @@
#wrapper { #wrapper {
opacity: 1; opacity: 1;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
display: block; flex: 1 0 auto;
display: flex;
flex-direction: column;
} }
#wrapper.fade-out { #wrapper.fade-out {
@ -50,8 +52,42 @@
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
html, body {
height: 100%;
margin: 0;
}
body { body {
display: block; display: flex;
flex-direction: column;
min-height: 100vh;
}
.container, .container-fluid {
flex: 1 0 auto;
display: flex;
flex-direction: column;
padding: 1rem;
}
.main-content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.card {
flex: 1 0 auto;
display: flex;
flex-direction: column;
margin: 1rem 0;
}
.card-body {
flex: 1 0 auto;
display: flex;
flex-direction: column;
} }
</style> </style>
@ -61,8 +97,11 @@
<partial name="_Busy" /> <partial name="_Busy" />
<div id="wrapper"> <div id="wrapper">
<nav id="nav-bar" class="navbar navbar-expand-lg navbar-dark"> <nav id="nav-bar" class="navbar navbar-expand-lg navbar-dark">
<!-- Seu código de navegação existente --> <!-- Substituir esta linha no _layout.cshtml -->
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Chat IA</a> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
<img src="~/img/logo.png" alt="DOMVS iT" height="30" class="d-inline-block align-top mr-2">
Chat IA
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
@ -114,8 +153,8 @@
@RenderBody() @RenderBody()
</div> </div>
<footer class="border-top footer text-muted"> <footer class="border-top footer text-muted ">
<div class="container"> <div>
&copy; 2024 - Chat IA - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> &copy; 2024 - Chat IA - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div> </div>
</footer> </footer>

View File

@ -1,28 +1,27 @@
 /* Color palette variables */
/* Color palette variables */
:root { :root {
--primary-green: #2E7D32; /* Darker green for headers */ --primary-blue: #000722; /* Cor base - azul escuro */
--secondary-green: #43A047; /* Slightly lighter green for interactive elements */ --secondary-blue: #0A1D4C; /* Azul um pouco mais claro para elementos interativos */
--light-green: #C8E6C9; /* Very light green for backgrounds */ --light-blue: #C7D2E9; /* Azul bem claro para backgrounds */
--hover-green: #1B5E20; /* Darker green for hover states */ --hover-blue: #010B3B; /* Azul mais escuro para hover states */
--accent-green: #81C784; /* Medium green for accents */ --accent-blue: #2D4275; /* Azul médio para acentos */
--bg-light: #F1F8E9; /* Super light green for main background */ --bg-light: #EFF2F9; /* Azul super claro para background principal */
} }
/* Navbar styling */ /* Navbar styling */
#nav-bar { #nav-bar {
background-color: var(--primary-green) !important; background-color: var(--primary-blue) !important;
} }
/* Button primary override */ /* Button primary override */
.btn-primary, .btn-success { .btn-primary, .btn-success {
background-color: var(--secondary-green) !important; background-color: var(--secondary-blue) !important;
border-color: var(--secondary-green) !important; border-color: var(--secondary-blue) !important;
} }
.btn-primary:hover, .btn-success:hover { .btn-primary:hover, .btn-success:hover {
background-color: var(--hover-green) !important; background-color: var(--hover-blue) !important;
border-color: var(--hover-green) !important; border-color: var(--hover-blue) !important;
} }
/* Chat card styling */ /* Chat card styling */
@ -32,36 +31,37 @@
} }
.card-header { .card-header {
background-color: var(--primary-green) !important; background-color: var(--primary-blue) !important;
color: white !important;
} }
/* Message bubbles */ /* Message bubbles */
.chat-message-user { .chat-message-user {
background-color: var(--secondary-green) !important; background-color: var(--secondary-blue) !important;
color: white; color: white;
border-radius: 15px 15px 0 15px !important; border-radius: 15px 15px 0 15px !important;
} }
.chat-message-bot { .chat-message-bot {
background-color: white !important; background-color: white !important;
border: 1px solid var(--light-green) !important; border: 1px solid var(--light-blue) !important;
color: #333; color: #333;
border-radius: 15px 15px 15px 0 !important; border-radius: 15px 15px 15px 0 !important;
} }
/* Input group styling */ /* Input group styling */
.input-group .form-control { .input-group .form-control {
border: 1px solid var(--light-green); border: 1px solid var(--light-blue);
} }
.input-group .form-control:focus { .input-group .form-control:focus {
border-color: var(--accent-green); border-color: var(--accent-blue);
box-shadow: 0 0 0 0.2rem rgba(67, 160, 71, 0.25); box-shadow: 0 0 0 0.2rem rgba(10, 29, 76, 0.25);
} }
/* Navbar active state */ /* Navbar active state */
.navbar .navbar-collapse ul.navbar-nav .nav-item.active { .navbar .navbar-collapse ul.navbar-nav .nav-item.active {
background-color: var(--accent-green) !important; background-color: var(--accent-blue) !important;
} }
/* Custom scrollbar for chat messages */ /* Custom scrollbar for chat messages */
@ -74,10 +74,10 @@
} }
#chat-messages::-webkit-scrollbar-thumb { #chat-messages::-webkit-scrollbar-thumb {
background: var(--accent-green); background: var(--accent-blue);
border-radius: 4px; border-radius: 4px;
} }
#chat-messages::-webkit-scrollbar-thumb:hover { #chat-messages::-webkit-scrollbar-thumb:hover {
background: var(--secondary-green); background: var(--secondary-blue);
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 16 KiB