- Build of the Chat Client using Vue.js

- Accompanying css
- Views to serve the Chat Client
- first test version of the TRACIE_SELECTION_SPECIALIST
- ESS Implemented.

eveai_chat_client/static/css/chat.css

@@ -98,17 +98,9 @@ body {
     border-bottom: 1px solid rgba(0,0,0,0.1);
 }
 
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--spacing);
-}
+/* .chat-messages wordt nu gedefinieerd in chat-components.css */
 
-.message {
-    margin-bottom: var(--spacing);
-    max-width: 80%;
-    clear: both;
-}
+/* .message wordt nu gedefinieerd in chat-components.css */
 
 .user-message {
     float: right;
@@ -118,11 +110,7 @@ body {
     float: left;
 }
 
-.message-content {
-    padding: 12px 16px;
-    border-radius: var(--border-radius);
-    display: inline-block;
-}
+/* .message-content wordt nu gedefinieerd in chat-components.css */
 
 .user-message .message-content {
     background-color: var(--message-user-bg);
@@ -134,11 +122,7 @@ body {
     color: var(--text-color);
 }
 
-.chat-input-container {
-    padding: var(--spacing);
-    border-top: 1px solid rgba(0,0,0,0.1);
-    display: flex;
-}
+/* .chat-input-container wordt nu gedefinieerd in chat-components.css */
 
 #chat-input {
     flex: 1;
@@ -150,44 +134,7 @@ body {
     margin-right: 8px;
 }
 
-#send-button {
-    padding: 0 24px;
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    border-radius: var(--border-radius);
-    cursor: pointer;
-}
-
-/* Loading indicator */
-.typing-indicator {
-    display: flex;
-    align-items: center;
-}
-
-.typing-indicator span {
-    height: 8px;
-    width: 8px;
-    background-color: rgba(0,0,0,0.3);
-    border-radius: 50%;
-    display: inline-block;
-    margin-right: 4px;
-    animation: typing 1.5s infinite ease-in-out;
-}
-
-.typing-indicator span:nth-child(2) {
-    animation-delay: 0.2s;
-}
-
-.typing-indicator span:nth-child(3) {
-    animation-delay: 0.4s;
-}
-
-@keyframes typing {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.5); }
-    100% { transform: scale(1); }
-}
+/* .typing-indicator en bijbehorende animaties worden nu gedefinieerd in chat-components.css */
 
 /* Error page styles */
 .error-container {
@@ -215,30 +162,6 @@ body {
     margin-top: 1.5rem;
 }
 
-.btn-primary {
-    display: inline-block;
-    background-color: var(--primary-color);
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: var(--border-radius);
-    text-decoration: none;
-}
+/* .btn-primary wordt nu gedefinieerd in chat-components.css */
 
-/* Responsive design */
-@media (max-width: 768px) {
-    .chat-container {
-        flex-direction: column;
-    }
-    
-    .sidebar {
-        width: 100%;
-        height: auto;
-        max-height: 30%;
-        border-right: none;
-        border-bottom: 1px solid rgba(0,0,0,0.1);
-    }
-    
-    .message {
-        max-width: 90%;
-    }
-}
+/* Responsieve design regels worden nu gedefinieerd in chat-components.css */