fix: ajustes de layout

Chat/Views/Chat/Index.cshtml

@@ -30,12 +30,23 @@
             margin-top: 0.5rem;
             color: #666;
         }
+
+        .message-input {
+            resize: none;
+            transition: all 0.3s ease;
+            min-height: 40px;
+            max-height: 200px;
+        }
+
+            .message-input:focus {
+                min-height: 60px;
+            }
     </style>
 }
 
-<div class="container-fluid bg-light">
+<div class="container-fluid bg-light main-content">
     <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-body">
                     <div id="chat-messages" class="mb-4" style="height: 350px; overflow-y: auto;">
@@ -47,7 +58,7 @@
                         <div class="input-group">
                             <textarea id="message-input" class="form-control"
                                       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">
                                 <i class="bi bi-paperclip"></i>
                                 <input type="file" id="file-input" accept="application/pdf,image/png" multiple>
@@ -92,14 +103,14 @@
             // });
 
             const msgInit = `Olá! Eu sou uma IA desenvolvida para atuar internamente na Domvs iT. Você pode:
-        - Fazer perguntas sobre os serviços da Domvs iT
+                                    - Fazer perguntas sobre os serviços da Domvs iT
-        - 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) {
                 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) {
                 e.preventDefault();
                 const message = messageInput.val().trim();

Chat/Views/Shared/_Layout.cshtml

@@ -16,7 +16,9 @@
         #wrapper {
             opacity: 1;
             transition: opacity 0.3s ease-in-out;
-            display: block;
+            flex: 1 0 auto;
+            display: flex;
+            flex-direction: column;
         }
 
         #wrapper.fade-out {
@@ -50,8 +52,42 @@
             100% { transform: rotate(360deg); }
         }
 
+        html, body {
+            height: 100%;
+            margin: 0;
+        }
+
         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>
     
@@ -61,8 +97,11 @@
     <partial name="_Busy" />
     <div id="wrapper">
         <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">
                 <span class="navbar-toggler-icon"></span>
             </button>
@@ -114,8 +153,8 @@
             @RenderBody()
         </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>
             </div>
         </footer>

Chat/wwwroot/css/layout.css

@@ -1,28 +1,27 @@
-
+/* Color palette variables */
-/* Color palette variables */
 :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 */
 #nav-bar {
-    background-color: var(--primary-green) !important;
+    background-color: var(--primary-blue) !important;
 }
 
 /* Button primary override */
 .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 {
-        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 */
@@ -32,36 +31,37 @@
 }
 
 .card-header {
-    background-color: var(--primary-green) !important;
+    background-color: var(--primary-blue) !important;
+    color: white !important;
 }
 
 /* Message bubbles */
 .chat-message-user {
-    background-color: var(--secondary-green) !important;
+    background-color: var(--secondary-blue) !important;
     color: white;
     border-radius: 15px 15px 0 15px !important;
 }
 
 .chat-message-bot {
     background-color: white !important;
-    border: 1px solid var(--light-green) !important;
+    border: 1px solid var(--light-blue) !important;
     color: #333;
     border-radius: 15px 15px 15px 0 !important;
 }
 
 /* Input group styling */
 .input-group .form-control {
-    border: 1px solid var(--light-green);
+    border: 1px solid var(--light-blue);
 }
 
     .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 .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 */
@@ -74,10 +74,10 @@
 }
 
 #chat-messages::-webkit-scrollbar-thumb {
-    background: var(--accent-green);
+    background: var(--accent-blue);
     border-radius: 4px;
 }
 
-#chat-messages::-webkit-scrollbar-thumb:hover {
+    #chat-messages::-webkit-scrollbar-thumb:hover {
-    background: var(--secondary-green);
+        background: var(--secondary-blue);
-}
+    }