- 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
2025-08-02 16:36:41 +02:00
parent 998ddf4c03
commit 9a88582fff
50 changed files with 2064 additions and 384 deletions
--- a/documentation/ICON_MANAGEMENT_GUIDE.md
+++ b/documentation/ICON_MANAGEMENT_GUIDE.md
@@ -108,7 +108,91 @@ const { loadIcon } = useFormIcon(() => props.formData);

 1. **ChatInput.vue** - Uses `useIconManager()` composable
 2. **ChatMessage.vue** - Uses `useIconManager()` composable  
-3. **DynamicForm.vue** - Uses `useIconManager()` composable
+3. **DynamicForm.vue** - Uses `useIconManager()` composable with boolean icon support
+
+## 🔘 Boolean Value Display
+
+### Overview
+
+Boolean values in read-only DynamicForm components are automatically displayed using Material Icons instead of text for improved user experience.
+
+### Icon Mapping
+
+```javascript
+const booleanIconMapping = {
+  true: 'check_circle',    // Green checkmark icon
+  false: 'cancel'          // Red cancel/cross icon
+};
+```
+
+### Visual Styling
+
+- **True values**: Green `check_circle` icon (#4caf50)
+- **False values**: Red `cancel` icon (#f44336)
+- **Size**: 20px font size with middle vertical alignment
+- **Accessibility**: Includes `aria-label` and `title` attributes
+
+### Usage Example
+
+```vue
+<!-- Form definition with boolean fields -->
+<script>
+export default {
+  data() {
+    return {
+      formData: {
+        title: 'User Settings',
+        fields: [
+          { id: 'active', name: 'Actief', type: 'boolean' },
+          { id: 'verified', name: 'Geverifieerd', type: 'boolean' }
+        ]
+      },
+      formValues: {
+        active: true,    // Will show green check_circle
+        verified: false  // Will show red cancel
+      }
+    };
+  }
+};
+</script>
+
+<!-- Read-only display -->
+<dynamic-form 
+  :form-data="formData" 
+  :form-values="formValues" 
+  :read-only="true"
+  api-prefix="/api"
+/>
+```
+
+### Implementation Details
+
+- **Automatic icon loading**: Boolean icons (`check_circle`, `cancel`) are preloaded when DynamicForm mounts
+- **Read-only only**: Edit mode continues to use standard HTML checkboxes
+- **Accessibility**: Each icon includes Dutch labels ('Ja'/'Nee') for screen readers
+- **Responsive**: Icons scale appropriately with form styling
+
+### CSS Classes
+
+```css
+.boolean-icon {
+    font-size: 20px;
+    vertical-align: middle;
+}
+
+.boolean-true {
+    color: #4caf50; /* Green for true */
+}
+
+.boolean-false {
+    color: #f44336; /* Red for false */
+}
+
+.field-value.boolean-value {
+    display: flex;
+    align-items: center;
+}
+```

 ### Zero Legacy Code Remaining ✅