- Refinement of the chat client to have better visible clues for user vs chatbot messages

- Introduction of interview_phase and normal phase in TRAICIE_SELECTION_SPECIALIST to make interaction with bot more human.
- More and random humanised messages to TRAICIE_SELECTION_SPECIALIST

eveai_chat_client/static/assets/css/chat-components.css

@@ -79,23 +79,14 @@
 }
 
 /* Chat Input styling */
-.chat-input-container {
-    width: 100%;
-    position: relative;
-    padding: 20px; /* Interne padding voor ChatInput */
-    box-sizing: border-box;
-    max-width: 1000px; /* Optimale breedte */
-    margin-left: auto;
-    margin-right: auto; /* Horizontaal centreren */
-}
 
 .chat-input {
     display: flex;
     align-items: flex-end;
     gap: 12px;
     padding: 20px;
-    background: var(--active-background-color);
-    color: var(--active-text-color);
+    background: var(--human-message-background);
+    color: var(--human-message-text-color);
     border-radius: 15px;
     box-shadow: 0 2px 15px rgba(0,0,0,0.1);
     border: 1px solid rgba(0,0,0,0.05);
@@ -113,37 +104,6 @@
     gap: 8px;
 }
 
-.send-btn {
-    width: 45px;
-    height: 45px;
-    border: none;
-    border-radius: 50%;
-    background: var(--active-background-color);
-    color: var(--active-text-color);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-
-.send-btn:hover:not(:disabled) {
-    background: var(--active-text-color);
-    color: var(--active-background-color);
-    transform: scale(1.05);
-    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-}
-
-.send-btn:disabled {
-    background: #ccc;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-
-
 /* Character counter */
 .character-counter {
     position: absolute;
@@ -152,7 +112,7 @@
     font-size: 12px;
     color: #666;
     padding: 2px 6px;
-    background: rgba(255,255,255,0.9);
+    background: rgba(255,255,255,0.2);
     border-radius: 10px;
     backdrop-filter: blur(5px);
 }
@@ -190,11 +150,6 @@
         max-width: 100%; /* Op mobiel volledige breedte gebruiken */
     }
 
-    .chat-input-container {
-        padding: 15px;
-        max-width: 100%; /* Op mobiel volledige breedte gebruiken */
-    }
-
     .chat-input {
         padding: 15px;
         gap: 10px;
@@ -224,10 +179,6 @@
     .message-history-container {
         padding: 12px;
     }
-
-    .chat-input-container {
-        padding: 12px;
-    }
 }
 
 /* Loading states */
@@ -343,16 +294,16 @@
 
 /* User message bubble styling */
 .message.user .message-content {
-    background: var(--history-user-message-background);
-    color: var(--history-message-text-color);
+    background: var(--human-message-background);
+    color: var(--human-message-text-color);
     border-bottom-right-radius: 4px;
 }
 
 /* AI/Bot message bubble styling */
 .message.ai .message-content,
 .message.bot .message-content {
-    background: var(--history-ai-message-background);
-    color: var(--history-message-text-color);
+    background: var(--ai-message-background);
+    color: var(--ai-message-text-color);
     border-bottom-left-radius: 4px;
     margin-right: 60px;
 }

eveai_chat_client/static/assets/css/chat-input.css

@@ -1,14 +1,6 @@
 /* ChatInput component styling */
 
 /* Algemene container */
-.chat-input-container {
-    width: 100%;
-    padding: 10px;
-    background-color: #fff;
-    border-top: 1px solid #e0e0e0;
-    font-family: Arial, sans-serif;
-    font-size: 14px;
-}
 
 /* Input veld en knoppen */
 .chat-input {
@@ -42,38 +34,6 @@
     gap: 8px;
 }
 
-/* Verzendknop */
-.send-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    background-color: #0084ff;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.send-btn:hover {
-    background-color: #0077e6;
-}
-
-.send-btn:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
-}
-
-.send-btn.form-mode {
-    background-color: #4caf50;
-}
-
-.send-btn.form-mode:hover {
-    background-color: #43a047;
-}
-
 /* Loading spinner */
 .loading-spinner {
     display: inline-block;
@@ -85,3 +45,40 @@
     100% { transform: rotate(360deg); }
 }
 
+/* Form actions container */
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 10px 0;
+    margin-top: 10px;
+}
+
+/* Form send actions container - for send button within form */
+.form-send-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 10px 0;
+    margin-top: 10px;
+}
+
+/* Dynamic form container transitions */
+.dynamic-form-container {
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    transform: translateY(0);
+    opacity: 1;
+}
+
+/* Chat input transitions */
+.chat-input {
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    transform: translateY(0);
+    opacity: 1;
+}
+
+/* Smooth transitions for mode switching */
+.chat-input-container > * {
+    transition: opacity 0.2s ease-in-out;
+}
+

eveai_chat_client/static/assets/css/chat-message.css

@@ -149,3 +149,46 @@
     font-family: Arial, sans-serif;
     font-size: 14px;
 }
+
+/* Ensure forms in messages use full available width */
+.message .dynamic-form-container {
+    width: 100%;
+    max-width: none;
+}
+
+.message .dynamic-form {
+    width: 100%;
+}
+
+.message .form-fields {
+    width: 100%;
+}
+
+/* Optimize form field layout in messages to prevent unnecessary label wrapping */
+.message .form-field {
+    display: grid;
+    grid-template-columns: 30% 70%;
+    gap: 12px;
+    align-items: start;
+    width: 100%;
+}
+
+/* Ensure form field inputs use full available space */
+.message .form-field input,
+.message .form-field select,
+.message .form-field textarea {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Special handling for radio fields in messages */
+.message .form-field.radio-field {
+    display: block;
+    width: 100%;
+}
+
+.message .form-field.radio-field .field-label {
+    display: block;
+    margin-bottom: 8px;
+    width: 100%;
+}

eveai_chat_client/static/assets/css/form.css

@@ -124,3 +124,21 @@
 .text-value {
     white-space: pre-wrap;
 }
+
+/* Loading spinner for send button */
+.form-actions .loading-spinner {
+    display: inline-block;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Flexbox layout for single send button */
+.form-actions.with-send-button {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}