Chat client changes

- Form values shown correct in MessageHistory of Chat client
- Improements to CSS
- Move css en js to assets directory
- Introduce better Personal Contact Form & Professional Contact Form
- Start working on actual Selection Specialist

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

@@ -0,0 +1,161 @@
+/* chat-message.css */
+
+/* Algemene styling voor berichten */
+.message {
+    max-width: 90%;
+    margin-bottom: 15px;
+    width: auto;
+}
+
+.message.user {
+    margin-left: auto;
+}
+
+.message.ai {
+    margin-right: auto;
+}
+
+.message-content {
+    width: 100%;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+}
+
+/* Formulier styling */
+.form-display {
+    margin: 15px 0;
+    border-radius: 8px;
+    background-color: rgba(245, 245, 245, 0.7);
+    padding: 15px;
+    border: 1px solid #e0e0e0;
+    font-family: inherit;
+}
+
+/* Tabel styling voor formulieren */
+.form-result-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: inherit;
+}
+
+.form-result-table th {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid #e0e0e0;
+    font-weight: 600;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+}
+
+.form-result-table td {
+    padding: 8px;
+    border-bottom: 1px solid #f0f0f0;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+}
+
+.form-result-table td:first-child {
+    font-weight: 500;
+    width: 35%;
+}
+
+/* Styling voor formulier invoervelden */
+.form-result-table input.form-input,
+.form-result-table textarea.form-textarea,
+.form-result-table select.form-select {
+    width: 100%;
+    padding: 6px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    background-color: white;
+}
+
+.form-result-table textarea.form-textarea {
+    resize: vertical;
+    min-height: 60px;
+}
+
+/* Styling voor tabel cellen */
+.form-result-table .field-label {
+    padding: 8px;
+    border-bottom: 1px solid #f0f0f0;
+    font-weight: 500;
+    width: 35%;
+    vertical-align: top;
+}
+
+.form-result-table .field-value {
+    padding: 8px;
+    border-bottom: 1px solid #f0f0f0;
+    vertical-align: top;
+}
+
+/* Toggle Switch styling */
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 24px;
+}
+
+.toggle-input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 24px;
+}
+
+.toggle-knob {
+    position: absolute;
+    content: '';
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+/* Material icon styling */
+.material-symbols-outlined {
+    vertical-align: middle;
+    margin-right: 8px;
+    font-size: 20px;
+}
+
+.form-header {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+/* Zorgt dat het lettertype consistent is */
+.message-text {
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* Form error styling */
+.form-error {
+    color: red;
+    padding: 10px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+}