- Add human_message_inactive_text_color

common/utils/chat_utils.py

@@ -36,7 +36,7 @@ def get_default_chat_customisation(tenant_customisation=None):
         'ai_message_text_color': '#212529',
         'human_message_background': '#212529',
         'human_message_text_color': '#ffffff',
-
+        'human_message_inactive_text_color': '#808080'
     }
 
     # If no tenant customization is provided, return the defaults

config/customisations/globals/CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml

@@ -82,6 +82,11 @@ configuration:
     description: "Human Message Text Color"
     type: "color"
     required: false
+  human_message_inactive_text_color:
+    name: "Human Message Inactive Text Color"
+    description: "Human Message Inactive Text Color"
+    type: "color"
+    required: false
 metadata:
   author: "Josako"
   date_added: "2024-06-06"

config/static-manifest/manifest.json

@@ -1,6 +1,6 @@
 {
-  "dist/chat-client.js": "dist/chat-client.f7f06623.js",
-  "dist/chat-client.css": "dist/chat-client.cf7bc0ef.css",
+  "dist/chat-client.js": "dist/chat-client.f7134231.js",
+  "dist/chat-client.css": "dist/chat-client.99e10656.css",
   "dist/main.js": "dist/main.6a617099.js",
   "dist/main.css": "dist/main.06893f70.css"
 }

eveai_chat_client/static/assets/vue-components/ChatInput.vue

@@ -49,6 +49,7 @@
                     :maxlength="maxLength"
                     class="message-input"
                     :class="{ 'over-limit': isOverLimit }"
+                    :style="{ '--placeholder-color': placeholderColor }"
                 ></textarea>
 
             </div>
@@ -170,6 +171,13 @@ export default {
                 return 'Verzenden...';
             }
             return this.formData ? 'Verstuur formulier' : 'Verstuur bericht';
+        },
+
+        // Kleur voor placeholder (inactieve toestand)
+        placeholderColor() {
+            const cfg = (typeof window !== 'undefined' && window.chatConfig) ? window.chatConfig : {};
+            const custom = cfg.customisation || {};
+            return custom.human_message_inactive_text_color || '#808080';
         }
     },
     watch: {
@@ -487,6 +495,24 @@ export default {
     display: none;
 }
 
+/* Placeholder kleur op basis van customisation */
+.message-input::placeholder {
+    color: var(--placeholder-color, #808080);
+    opacity: 1; /* Zorgt ervoor dat de kleur niet gedimd wordt in sommige browsers */
+}
+.message-input::-webkit-input-placeholder {
+    color: var(--placeholder-color, #808080);
+}
+.message-input::-moz-placeholder {
+    color: var(--placeholder-color, #808080);
+}
+.message-input:-ms-input-placeholder {
+    color: var(--placeholder-color, #808080);
+}
+.message-input::-ms-input-placeholder {
+    color: var(--placeholder-color, #808080);
+}
+
 
 /* Input actions */
 .input-actions {

eveai_chat_client/templates/chat.html

@@ -29,6 +29,8 @@
             'name': tenant_make.name or 'EveAI',
             'logo_url': tenant_make.logo_url or ''
         }|tojson|safe }},
+        // Geef volledige customisation door naar de client
+        customisation: {{ customisation|tojson|safe }},
         // Environment-aware static base provided by Flask's overridden url_for
         staticBase: {{ static_url|tojson }}
     };