- 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
This commit is contained in:
Josako
@@ -26,14 +26,16 @@
|
||||
:form-values="formValues"
|
||||
:api-prefix="apiPrefix"
|
||||
:is-submitting="isLoading"
|
||||
:hide-actions="true"
|
||||
:show-send-button="true"
|
||||
:is-submitting-form="isLoading"
|
||||
:send-button-text="'Verstuur formulier'"
|
||||
@update:form-values="updateFormValues"
|
||||
@form-enter-pressed="sendMessage"
|
||||
@form-send-submit="handleFormSendSubmit"
|
||||
></dynamic-form>
|
||||
|
||||
<!-- Geen extra knoppen meer onder het formulier, alles gaat via de hoofdverzendknop -->
|
||||
</div>
|
||||
|
||||
<div class="chat-input">
|
||||
<div v-if="!formData" class="chat-input">
|
||||
<!-- Main input area -->
|
||||
<div class="input-main">
|
||||
<textarea
|
||||
@@ -57,13 +59,12 @@
|
||||
<!-- Input actions -->
|
||||
<div class="input-actions">
|
||||
|
||||
<!-- Universele verzendknop (voor zowel berichten als formulieren) -->
|
||||
<!-- Message send button -->
|
||||
<button
|
||||
@click="sendMessage"
|
||||
class="send-btn"
|
||||
:class="{ 'form-mode': formData }"
|
||||
:disabled="!canSend"
|
||||
:title="formData ? 'Verstuur formulier' : 'Verstuur bericht'"
|
||||
:title="'Verstuur bericht'"
|
||||
>
|
||||
<span v-if="isLoading" class="loading-spinner">⏳</span>
|
||||
<svg v-else width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
@@ -156,12 +157,15 @@ export default {
|
||||
},
|
||||
|
||||
canSend() {
|
||||
const hasValidForm = this.formData && this.validateForm();
|
||||
const hasValidMessage = this.localMessage.trim() && !this.isOverLimit;
|
||||
|
||||
// We kunnen nu verzenden als er een geldig formulier OF een geldig bericht is
|
||||
// Bij een formulier is aanvullende tekst optioneel
|
||||
return (!this.isLoading) && (hasValidForm || hasValidMessage);
|
||||
if (this.isLoading) return false;
|
||||
|
||||
if (this.formData) {
|
||||
// Form mode: only validate form, message is optional
|
||||
return this.validateForm();
|
||||
} else {
|
||||
// Normal mode: validate message
|
||||
return this.localMessage.trim() && !this.isOverLimit;
|
||||
}
|
||||
},
|
||||
|
||||
hasFormDataToSend() {
|
||||
@@ -319,21 +323,32 @@ export default {
|
||||
},
|
||||
|
||||
sendMessage() {
|
||||
console.log('ChatInput: sendMessage called, formData:', !!this.formData);
|
||||
if (!this.canSend) return;
|
||||
|
||||
// Bij een formulier gaan we het formulier en optioneel bericht combineren
|
||||
if (this.formData) {
|
||||
console.log('ChatInput: Processing form submission');
|
||||
// Valideer het formulier
|
||||
if (this.validateForm()) {
|
||||
// Verstuur het formulier, eventueel met aanvullende tekst
|
||||
this.$emit('submit-form', this.formValues);
|
||||
}
|
||||
} else if (this.localMessage.trim()) {
|
||||
console.log('ChatInput: Processing regular message');
|
||||
// Verstuur normaal bericht zonder formulier
|
||||
this.$emit('send-message');
|
||||
}
|
||||
},
|
||||
|
||||
handleFormSendSubmit(formValues) {
|
||||
console.log('ChatInput: handleFormSendSubmit called with values:', formValues);
|
||||
// Zorg dat formValues correct worden doorgegeven
|
||||
this.formValues = formValues;
|
||||
// Roep sendMessage aan om de normale flow te volgen
|
||||
this.sendMessage();
|
||||
},
|
||||
|
||||
getFormValuesForSending() {
|
||||
// Geeft de huidige formulierwaarden terug voor verzending
|
||||
return this.formValues;
|
||||
@@ -420,9 +435,9 @@ export default {
|
||||
/* Algemene container */
|
||||
.chat-input-container {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
padding: 20px;
|
||||
background-color: var(--active-background-color);
|
||||
color: var(--active-text-color);
|
||||
color: var(--human-message-text-color);
|
||||
border-top: 1px solid #e0e0e0;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
@@ -454,8 +469,8 @@ export default {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
/* Transparante achtergrond in plaats van wit */
|
||||
background-color: var(--active-background-color);
|
||||
color: var(--active-text-color);
|
||||
background-color: var(--human-message-background);
|
||||
color: var(--human-message-text-color);
|
||||
/* Box-sizing om padding correct te berekenen */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -466,7 +481,8 @@ export default {
|
||||
right: 15px;
|
||||
bottom: 12px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
color: var(--human-message-text-color);
|
||||
opacity: 0.7;
|
||||
pointer-events: none; /* Voorkom dat deze de textarea verstoort */
|
||||
}
|
||||
|
||||
@@ -491,38 +507,24 @@ export default {
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--active-background-color);
|
||||
color: var(--active-text-color);
|
||||
border: 1px solid var(--active-text-color);
|
||||
background-color: var(--human-message-background);
|
||||
color: var(--human-message-text-color);
|
||||
border: 2px solid var(--human-message-text-color);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
flex-shrink: 0; /* Voorkom dat de knop krimpt */
|
||||
}
|
||||
|
||||
.send-btn:hover {
|
||||
background-color: var(--active-text-color);
|
||||
color: var(--active-background-color);
|
||||
.send-btn:hover:not(:disabled) {
|
||||
background-color: var(--human-message-background);
|
||||
}
|
||||
|
||||
.send-btn:disabled {
|
||||
background-color: #ccc;
|
||||
color: #666;
|
||||
border-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.send-btn.form-mode {
|
||||
background-color: var(--active-background-color);
|
||||
color: var(--active-text-color);
|
||||
border-color: var(--active-text-color);
|
||||
}
|
||||
|
||||
.send-btn.form-mode:hover {
|
||||
background-color: var(--active-text-color);
|
||||
color: var(--active-background-color);
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
@@ -538,8 +540,8 @@ export default {
|
||||
.active-ai-message-area {
|
||||
margin-bottom: 15px;
|
||||
padding: 12px;
|
||||
background-color: var(--active-background-color);
|
||||
color: var(--active-text-color);
|
||||
background-color: var(--ai-message-background);
|
||||
color: var(--ai-message-text-color);
|
||||
border-radius: 8px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
|
||||
Reference in New Issue
Block a user