feat:add voice input
This commit is contained in:
@@ -103,6 +103,285 @@ const undoTimer = ref(null);
|
||||
const undoProgress = ref(100);
|
||||
const undoInterval = ref(null);
|
||||
|
||||
const formatRecordingTime = (seconds) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
|
||||
// Voice Recording
|
||||
const isRecording = ref(false);
|
||||
const mediaRecorder = ref(null);
|
||||
const audioChunks = ref([]);
|
||||
const recordingStartTime = ref(null);
|
||||
const recordingDuration = ref(0);
|
||||
const recordingInterval = ref(null);
|
||||
const voiceMessage = ref(null);
|
||||
const audioStream = ref(null);
|
||||
const audioContext = ref(null);
|
||||
const analyser = ref(null);
|
||||
const dataArray = ref(null);
|
||||
const animationFrame = ref(null);
|
||||
const waveformData = ref(new Array(50).fill(0));
|
||||
const waveformCanvas = ref(null);
|
||||
const canvasCtx = ref(null);
|
||||
|
||||
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
audioStream.value = stream;
|
||||
mediaRecorder.value = new MediaRecorder(stream);
|
||||
audioChunks.value = [];
|
||||
|
||||
audioContext.value = new (window.AudioContext || window.webkitAudioContext)();
|
||||
analyser.value = audioContext.value.createAnalyser();
|
||||
analyser.value.smoothingTimeConstant = 0.9;
|
||||
const source = audioContext.value.createMediaStreamSource(stream);
|
||||
|
||||
analyser.value.fftSize = 2048;
|
||||
analyser.value.smoothingTimeConstant = 0.7;
|
||||
source.connect(analyser.value);
|
||||
|
||||
const bufferLength = analyser.value.fftSize;
|
||||
dataArray.value = new Uint8Array(bufferLength);
|
||||
|
||||
mediaRecorder.value.ondataavailable = (event) => {
|
||||
audioChunks.value.push(event.data);
|
||||
};
|
||||
|
||||
mediaRecorder.value.onstop = () => {
|
||||
const audioBlob = new Blob(audioChunks.value, { type: "audio/wav" });
|
||||
voiceMessage.value = audioBlob;
|
||||
stopAudioAnalysis();
|
||||
};
|
||||
|
||||
mediaRecorder.value.start();
|
||||
isRecording.value = true;
|
||||
recordingStartTime.value = Date.now();
|
||||
|
||||
recordingInterval.value = setInterval(() => {
|
||||
recordingDuration.value = Math.floor((Date.now() - recordingStartTime.value) / 1000);
|
||||
}, 1000);
|
||||
|
||||
nextTick(() => {
|
||||
if (waveformCanvas.value) {
|
||||
canvasCtx.value = waveformCanvas.value.getContext("2d");
|
||||
drawWaveform();
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error accessing microphone:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const drawWaveform = () => {
|
||||
if (!isRecording.value || !analyser.value || !canvasCtx.value) return;
|
||||
|
||||
analyser.value.getByteTimeDomainData(dataArray.value);
|
||||
|
||||
const canvas = waveformCanvas.value;
|
||||
const ctx = canvasCtx.value;
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = `rgb(${getComputedStyle(document.documentElement)
|
||||
.getPropertyValue(`--v-theme-${activeModelColor.value}`)
|
||||
.trim()})`;
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
const sliceWidth = (width * 1.0) / dataArray.value.length;
|
||||
let x = 0;
|
||||
|
||||
for (let i = 0; i < dataArray.value.length; i++) {
|
||||
const v = dataArray.value[i] / 128.0;
|
||||
const y = (v * height) / 2;
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
|
||||
x += sliceWidth;
|
||||
}
|
||||
|
||||
ctx.lineTo(width, height / 2);
|
||||
ctx.stroke();
|
||||
|
||||
animationFrame.value = requestAnimationFrame(drawWaveform);
|
||||
};
|
||||
|
||||
|
||||
const animateWaveform = () => {
|
||||
if (!isRecording.value || !analyser.value) return;
|
||||
|
||||
analyser.value.getByteFrequencyData(dataArray.value);
|
||||
|
||||
const chunkSize = Math.floor(dataArray.value.length / 50);
|
||||
|
||||
for (let i = 0; i < 50; i++) {
|
||||
let sum = 0;
|
||||
const start = i * chunkSize;
|
||||
const end = Math.min(start + chunkSize, dataArray.value.length);
|
||||
|
||||
for (let j = start; j < end; j++) {
|
||||
sum += dataArray.value[j];
|
||||
}
|
||||
|
||||
const average = sum / (end - start);
|
||||
let normalizedValue = (average / 255) * 100;
|
||||
|
||||
waveformData.value[i] = waveformData.value[i] * 0.7 + normalizedValue * 0.3;
|
||||
}
|
||||
|
||||
updateWaveformBars();
|
||||
animationFrame.value = requestAnimationFrame(() => animateWaveform());
|
||||
};
|
||||
|
||||
const updateWaveformBars = () => {
|
||||
const bars = document.querySelectorAll('.waveform-bar');
|
||||
bars.forEach((bar, index) => {
|
||||
if (index < waveformData.value.length) {
|
||||
const height = Math.max(6, Math.min(20, 6 + (waveformData.value[index] * 0.14)));
|
||||
bar.style.height = `${height}px`;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const stopRecording = () => {
|
||||
if (mediaRecorder.value && mediaRecorder.value.state !== 'inactive') {
|
||||
mediaRecorder.value.stop();
|
||||
isRecording.value = false;
|
||||
|
||||
if (recordingInterval.value) {
|
||||
clearInterval(recordingInterval.value);
|
||||
recordingInterval.value = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cancelRecording = () => {
|
||||
if (mediaRecorder.value && mediaRecorder.value.state !== 'inactive') {
|
||||
mediaRecorder.value.onstop = null;
|
||||
mediaRecorder.value.stop();
|
||||
}
|
||||
|
||||
stopAudioAnalysis();
|
||||
|
||||
if (audioStream.value) {
|
||||
audioStream.value.getTracks().forEach(track => track.stop());
|
||||
audioStream.value = null;
|
||||
}
|
||||
|
||||
if (recordingInterval.value) {
|
||||
clearInterval(recordingInterval.value);
|
||||
recordingInterval.value = null;
|
||||
}
|
||||
|
||||
mediaRecorder.value = null;
|
||||
isRecording.value = false;
|
||||
voiceMessage.value = null;
|
||||
recordingDuration.value = 0;
|
||||
recordingStartTime.value = null;
|
||||
waveformData.value = new Array(50).fill(0);
|
||||
audioChunks.value = [];
|
||||
};
|
||||
const stopAudioAnalysis = () => {
|
||||
if (animationFrame.value) {
|
||||
cancelAnimationFrame(animationFrame.value);
|
||||
animationFrame.value = null;
|
||||
}
|
||||
if (audioContext.value && audioContext.value.state !== 'closed') {
|
||||
audioContext.value.close();
|
||||
audioContext.value = null;
|
||||
}
|
||||
if (audioStream.value) {
|
||||
audioStream.value.getTracks().forEach(track => track.stop());
|
||||
audioStream.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const sendVoiceMessage = async () => {
|
||||
if (!voiceMessage.value) return;
|
||||
|
||||
isQuickRepliesVisible.value = false;
|
||||
|
||||
isRequestCancelled.value = false;
|
||||
if (isInputCentered.value) isInputCentered.value = false;
|
||||
|
||||
messageQueue.value.push({
|
||||
text: "Voice message sent",
|
||||
sender: "user",
|
||||
isVoiceMessage: true,
|
||||
voiceBlob: voiceMessage.value,
|
||||
duration: recordingDuration.value
|
||||
});
|
||||
|
||||
const voiceBlob = voiceMessage.value;
|
||||
const duration = recordingDuration.value;
|
||||
voiceMessage.value = null;
|
||||
recordingDuration.value = 0;
|
||||
|
||||
await nextTick();
|
||||
scrollToBottom();
|
||||
|
||||
if (!isProcessingQueue.value && messageQueue.value.length > 0) {
|
||||
processMessageQueue();
|
||||
}
|
||||
|
||||
isBotTyping.value = true;
|
||||
abortController.value = new AbortController();
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('voice', voiceBlob, 'voice_message.wav');
|
||||
|
||||
const response = await fetch("/dev/voice", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
signal: abortController.value.signal,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
const responseText = result.response || result.message || result;
|
||||
const cleanText = cleanHtmlResponse(responseText);
|
||||
messageQueue.value.push({ text: cleanText, sender: "bot" });
|
||||
} else {
|
||||
messageQueue.value.push({
|
||||
text: "خطا در پردازش پیام صوتی. لطفاً دوباره امتحان کنید.",
|
||||
sender: "bot",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Voice API Error:", error);
|
||||
if (error.name !== "AbortError") {
|
||||
messageQueue.value.push({
|
||||
text: "خطا در ارسال پیام صوتی. لطفاً اتصال را چک کنید.",
|
||||
sender: "bot",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
isBotTyping.value = false;
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
scrollToBottom();
|
||||
};
|
||||
|
||||
const isVoiceRecordingAvailable = computed(() => {
|
||||
return !isInputDisabled.value && !isConfirmationActive.value && !activeForm.value && !activeMultiForm.value;
|
||||
});
|
||||
|
||||
|
||||
// Suggestion database
|
||||
const suggestionDatabase = {
|
||||
پروژه: ["New Project ایجاد کنم", "پروژه وب سایت", "پروژه اپلیکیشن موبایل", "پروژه سیستم مدیریت", "پروژه فروشگاه آنلاین", "پروژه های انجام شده", "پروژه در حال اجرا"],
|
||||
@@ -254,6 +533,11 @@ const findNextValidStep = (form, currentStepIndex, formData) => {
|
||||
return null;
|
||||
};
|
||||
|
||||
const rtlRegex = /[\u0600-\u06FF\u0750-\u077F]/;
|
||||
function getDir(str = "") {
|
||||
return rtlRegex.test(str) ? "rtl" : "ltr";
|
||||
}
|
||||
|
||||
const getSuggestions = (input) => {
|
||||
if (!input || input.length < 2) return [];
|
||||
|
||||
@@ -473,6 +757,11 @@ const startMultiForm = (formId) => {
|
||||
const sendMessage = async () => {
|
||||
if (isConfirmationActive.value) return;
|
||||
|
||||
if (voiceMessage.value) {
|
||||
await sendVoiceMessage();
|
||||
return;
|
||||
}
|
||||
|
||||
const userMsg = msg.value.trim();
|
||||
if (!userMsg && selectedAttachments.value.length === 0) return;
|
||||
|
||||
@@ -485,7 +774,10 @@ const sendMessage = async () => {
|
||||
if (userMsg === "/cancel") {
|
||||
activeForm.value = null;
|
||||
activeMultiForm.value = null;
|
||||
messageQueue.value.push({ text: "The form has been cancelled", sender: "bot" });
|
||||
messageQueue.value.push({
|
||||
text: "The form has been cancelled",
|
||||
sender: "bot",
|
||||
});
|
||||
msg.value = "";
|
||||
return;
|
||||
}
|
||||
@@ -493,16 +785,27 @@ const sendMessage = async () => {
|
||||
isRequestCancelled.value = false;
|
||||
if (isInputCentered.value) isInputCentered.value = false;
|
||||
|
||||
// Handle file uploads
|
||||
if (selectedAttachments.value.length > 0) {
|
||||
const fileNames = selectedAttachments.value.map(f => f.name).join(", ");
|
||||
const fileNames = selectedAttachments.value.map((f) => f.name).join(", ");
|
||||
messageQueue.value.push({
|
||||
text: userMsg || `Files sent: ${fileNames}`,
|
||||
sender: "user",
|
||||
isAttachment: true,
|
||||
files: [...selectedAttachments.value]
|
||||
files: [...selectedAttachments.value],
|
||||
});
|
||||
|
||||
selectedAttachments.value = [];
|
||||
msg.value = "";
|
||||
|
||||
messageQueue.value.push({
|
||||
text: "فایلها با موفقیت دریافت شد ✅",
|
||||
sender: "bot",
|
||||
isSystemMessage: true
|
||||
});
|
||||
|
||||
await nextTick();
|
||||
scrollToBottom();
|
||||
return;
|
||||
} else {
|
||||
messageQueue.value.push({ text: userMsg, sender: "user" });
|
||||
}
|
||||
@@ -515,7 +818,6 @@ const sendMessage = async () => {
|
||||
processMessageQueue();
|
||||
}
|
||||
|
||||
// Handle different message types
|
||||
if (activeMultiForm.value) {
|
||||
const formResponse = handleMultiFormResponse(userMsg);
|
||||
if (formResponse.completed) {
|
||||
@@ -526,35 +828,42 @@ const sendMessage = async () => {
|
||||
messageQueue.value.push({
|
||||
sender: "bot",
|
||||
multiForm: formResponse.nextStep,
|
||||
type: "multi-form"
|
||||
type: "multi-form",
|
||||
});
|
||||
}
|
||||
return;
|
||||
} else if (activeForm.value) {
|
||||
const formResponse = handleFormResponse(userMsg);
|
||||
messageQueue.value.push({ text: formResponse, sender: "bot" });
|
||||
activeForm.value = null;
|
||||
return;
|
||||
} else {
|
||||
const botReply = getBotReply(userMsg);
|
||||
|
||||
if (botReply && typeof botReply === "object") {
|
||||
if (botReply.type === "multi-form") {
|
||||
isBotTyping.value = true;
|
||||
await new Promise(r => setTimeout(r, 500));
|
||||
activeMultiForm.value = botReply.formId;
|
||||
currentFormStep.value = 0;
|
||||
multiFormData.value = {};
|
||||
const form = forms[botReply.formId];
|
||||
messageQueue.value.push({
|
||||
sender: "bot",
|
||||
multiForm: {
|
||||
...form.steps[0],
|
||||
stepNumber: 1,
|
||||
totalSteps: form.steps.length,
|
||||
formTitle: form.title
|
||||
},
|
||||
type: "multi-form"
|
||||
});
|
||||
isBotTyping.value = false;
|
||||
try {
|
||||
await new Promise((r) => setTimeout(r, 500));
|
||||
activeMultiForm.value = botReply.formId;
|
||||
currentFormStep.value = 0;
|
||||
multiFormData.value = {};
|
||||
const form = forms[botReply.formId];
|
||||
messageQueue.value.push({
|
||||
sender: "bot",
|
||||
multiForm: {
|
||||
...form.steps[0],
|
||||
stepNumber: 1,
|
||||
totalSteps: form.steps.length,
|
||||
formTitle: form.title,
|
||||
},
|
||||
type: "multi-form",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Multi-form setup error:", error);
|
||||
} finally {
|
||||
isBotTyping.value = false;
|
||||
}
|
||||
} else if (botReply.type === "form") {
|
||||
activeForm.value = botReply.formId;
|
||||
const form = forms[botReply.formId];
|
||||
@@ -565,43 +874,75 @@ const sendMessage = async () => {
|
||||
id: form.id,
|
||||
title: form.title,
|
||||
question: form.question,
|
||||
options: form.options
|
||||
options: form.options,
|
||||
},
|
||||
type: "form"
|
||||
type: "form",
|
||||
});
|
||||
}
|
||||
return;
|
||||
} else if (typeof botReply === "string") {
|
||||
messageQueue.value.push({ text: botReply, sender: "bot" });
|
||||
return;
|
||||
} else {
|
||||
// API call
|
||||
isBotTyping.value = true;
|
||||
abortController.value = new AbortController();
|
||||
|
||||
const SHOW_GENERIC_ERROR_IN_CHAT = true;
|
||||
|
||||
try {
|
||||
const response = await fetch("/CallChatService.php", {
|
||||
console.log("Sending message to server:", userMsg);
|
||||
|
||||
const response = await fetch("/dev/chatbot", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: new URLSearchParams({ message: userMsg }),
|
||||
signal: abortController.value.signal
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify({ message: userMsg }),
|
||||
signal: abortController.value.signal,
|
||||
});
|
||||
|
||||
console.log("Response status:", response.status);
|
||||
console.log("Response ok:", response.ok);
|
||||
|
||||
if (response.ok) {
|
||||
const resultText = await response.text();
|
||||
const cleanText = cleanHtmlResponse(resultText);
|
||||
const result = await response.json();
|
||||
const responseText = result.response || result.message || result;
|
||||
const cleanText = cleanHtmlResponse(responseText);
|
||||
messageQueue.value.push({ text: cleanText, sender: "bot" });
|
||||
} else {
|
||||
messageQueue.value.push({ text: "Error receiving response from server", sender: "bot" });
|
||||
let serverText = "";
|
||||
try {
|
||||
serverText = await response.text();
|
||||
} catch (e) { }
|
||||
console.error(`Server error (${response.status})`, serverText);
|
||||
if (SHOW_GENERIC_ERROR_IN_CHAT) {
|
||||
messageQueue.value.push({
|
||||
text: "چتبات با مشکل روبهرو شد. لطفاً دوباره امتحان کن.",
|
||||
sender: "bot",
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
if (!isRequestCancelled.value) {
|
||||
messageQueue.value.push({ text: "Could not connect to the server", sender: "bot" });
|
||||
} catch (error) {
|
||||
console.error("Chatbot API Error:", error);
|
||||
if (error.name === "AbortError") {
|
||||
console.log("Request was aborted");
|
||||
return;
|
||||
}
|
||||
if (SHOW_GENERIC_ERROR_IN_CHAT) {
|
||||
messageQueue.value.push({
|
||||
text: "چتبات با مشکل روبهرو شد. لطفاً اتصال را چک کن و دوباره تلاش کن.",
|
||||
sender: "bot",
|
||||
});
|
||||
}
|
||||
return;
|
||||
} finally {
|
||||
isBotTyping.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isBotTyping.value = false;
|
||||
await nextTick();
|
||||
scrollToBottom();
|
||||
};
|
||||
@@ -1134,6 +1475,9 @@ watch([activeForm, activeMultiForm, isConfirmationActive], ([form, multiForm, co
|
||||
if (form !== null || multiForm !== null || confirmation) {
|
||||
console.log('Quick replies hidden due to active form');
|
||||
}
|
||||
if (voiceMessage.value) {
|
||||
voiceMessage.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Lifecycle
|
||||
@@ -1147,6 +1491,7 @@ const models = MODELS;
|
||||
const commands = COMMANDS;
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<VLayout class="chat-app-layout" style="z-index: 0">
|
||||
<VMain class="chat-content-container">
|
||||
@@ -1169,15 +1514,21 @@ const commands = COMMANDS;
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<div class="pa-3 rounded-lg message-bubble" :class="[
|
||||
<div class="pa-3 rounded-lg message-bubble bidi-text" :dir="getDir(message.text)" :class="[
|
||||
message.sender === 'user'
|
||||
? 'bg-primary text-white'
|
||||
: message.isSystemMessage
|
||||
? 'bg-grey-lighten-3 text-grey-darken-3'
|
||||
: `bg-${activeModelBgColor} text-white`,
|
||||
message.isAnimating ? 'animate-message' : '',
|
||||
message.isVoiceMessage ? 'voice-message-bubble' : '',
|
||||
]">
|
||||
<div v-if="!message.form && !message.multiForm && !message.type">
|
||||
<div v-if="message.isVoiceMessage" class="voice-message-display d-flex align-center gap-2">
|
||||
<VIcon icon="tabler-microphone" size="16" />
|
||||
<span class="text-caption">Voice message ({{ message.duration }}s)</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!message.form && !message.multiForm && !message.type">
|
||||
{{ message.text }}
|
||||
</div>
|
||||
|
||||
@@ -1239,6 +1590,16 @@ const commands = COMMANDS;
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="message.multiForm.type === 'date'" class="form-date-input">
|
||||
<VTextField v-model="tempDateValue" :label="message.multiForm.question" type="date"
|
||||
:min="getMinDate(message.multiForm.id)" variant="outlined" :required="message.multiForm.required"
|
||||
@keyup.enter="handleDateSubmit" class="mb-3" hide-details />
|
||||
<VBtn :color="activeModelColor" variant="flat" size="small" @click="handleDateSubmit"
|
||||
:disabled="!tempDateValue" class="mt-2">
|
||||
Submit
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="message.type === 'confirmation'" class="confirmation-container">
|
||||
@@ -1251,7 +1612,7 @@ const commands = COMMANDS;
|
||||
<span class="font-weight-medium">{{ key }}:</span>
|
||||
<span class="ms-2">{{
|
||||
Array.isArray(value) ? value.join(", ") : value
|
||||
}}</span>
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1326,9 +1687,11 @@ const commands = COMMANDS;
|
||||
'centered-input': isInputCentered,
|
||||
'bottom-input': !isInputCentered,
|
||||
}">
|
||||
<div class="chat-input-container rounded-3xl pa-3 mb-2" :class="{ 'pt-0': selectedAttachments.length === 0 }"
|
||||
:style="`border: 1px solid rgba(var(--v-theme-${activeModelColor}), 0.5);
|
||||
<div class="chat-input-container rounded-3xl pa-3 mb-2" :class="{
|
||||
'pt-0': selectedAttachments.length === 0
|
||||
}" :style="`border: 1px solid rgba(var(--v-theme-${activeModelColor}), 0.5);
|
||||
--active-model-color: var(--v-theme-${activeModelColor})`">
|
||||
|
||||
<div v-if="selectedAttachments.length > 0" class="d-flex flex-wrap gap-2 mt-3 mb-2 attachment-chip-container">
|
||||
<VChip v-for="(file, index) in selectedAttachments" :key="index" closable
|
||||
@click:close="removeAttachment(index)" color="grey-lighten-3" class="align-center attachment-chip">
|
||||
@@ -1338,142 +1701,162 @@ const commands = COMMANDS;
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div class="position-relative">
|
||||
<VTextarea v-model="msg" auto-grow rows="1" row-height="30"
|
||||
:disabled="isInputDisabled || isConfirmationActive" hide-details variant="plain" persistent-placeholder
|
||||
density="comfortable" class="chat-textarea" placeholder="Type your message..." no-resize
|
||||
@keydown="handleKeyDown" @compositionstart="handleCompositionStart"
|
||||
@compositionend="handleCompositionEnd"></VTextarea>
|
||||
</div>
|
||||
|
||||
<div v-if="showSuggestions" class="suggestions-dropdown rounded pa-2">
|
||||
<div class="suggestions-header text-caption text-grey-darken-1 mb-1 px-2">
|
||||
Suggestions
|
||||
<div v-if="isRecording" class="voice-recording-ui">
|
||||
<div class="waveform-visualizer">
|
||||
<canvas ref="waveformCanvas"></canvas>
|
||||
</div>
|
||||
<div v-for="(suggestion, index) in suggestions" :key="index"
|
||||
class="suggestion-item pa-2 rounded d-flex align-center" :class="{
|
||||
'suggestion-selected': selectedSuggestionIndex === index,
|
||||
}" @click="selectSuggestion(suggestion)" @mouseenter="selectedSuggestionIndex = index">
|
||||
<VIcon icon="tabler-search" size="16" class="me-2 text-grey-darken-1"></VIcon>
|
||||
<span class="suggestion-text">{{ suggestion }}</span>
|
||||
<div class="voice-controls-wrapper">
|
||||
<div class="recording-time">{{ formatRecordingTime(recordingDuration) }}</div>
|
||||
<div class="voice-controls">
|
||||
<VBtn icon size="small" color="error" variant="flat" @click="cancelRecording" class="voice-btn">
|
||||
<VIcon icon="tabler-x" size="18" />
|
||||
</VBtn>
|
||||
<VBtn icon size="small" :color="activeModelColor" variant="flat" @click="stopRecording"
|
||||
class="voice-btn">
|
||||
<VIcon icon="tabler-check" size="18" />
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCommandList" class="command-dropdown rounded pa-2">
|
||||
<div v-for="(cmd, i) in filteredCommands" :key="i" class="command-item pa-2 rounded"
|
||||
@click="selectCommand(cmd)">
|
||||
{{ cmd }}
|
||||
|
||||
|
||||
<div v-else-if="voiceMessage" class="voice-preview-ui">
|
||||
<div class="voice-preview-content">
|
||||
<VIcon icon="tabler-microphone" size="18" :color="activeModelColor" />
|
||||
<span class="voice-preview-text">Voice message ready</span>
|
||||
<span class="voice-duration">({{ recordingDuration }}s)</span>
|
||||
</div>
|
||||
<div class="voice-controls">
|
||||
<VBtn icon size="small" color="error" variant="flat" @click="cancelRecording" class="voice-btn">
|
||||
<VIcon icon="tabler-x" size="18" />
|
||||
</VBtn>
|
||||
<VBtn icon size="small" :color="activeModelColor" variant="flat" @click="sendMessage" class="voice-btn">
|
||||
<VIcon icon="tabler-send" size="18" />
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center justify-space-between mt-1 input-toolbar">
|
||||
<div class="d-flex gap-2 align-center toolbar-buttons">
|
||||
<VBtn icon variant="text" density="comfortable"
|
||||
color="rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity))" @click="resetChat">
|
||||
<VIcon icon="tabler-message-circle-plus" />
|
||||
</VBtn>
|
||||
|
||||
<VBtn icon variant="text" density="comfortable" :color="activeModelColor" @click="triggerFileInput">
|
||||
<VIcon icon="tabler-paperclip"></VIcon>
|
||||
<input ref="fileInputRef" type="file" multiple class="d-none" @change="handleFileUpload" />
|
||||
</VBtn>
|
||||
|
||||
<VBtn :color="isWebSearchEnabled ? 'primary' : 'grey-darken-1'"
|
||||
:variant="isWebSearchEnabled ? 'tonal' : 'text'" :elevation="isWebSearchEnabled ? 8 : 2"
|
||||
density="comfortable" class="text-none web-search-btn"
|
||||
:class="{ 'web-search-active': isWebSearchEnabled }" @click="toggleWebSearch">
|
||||
<VIcon icon="tabler-analyze" class="me-1 web-icon" :class="{ 'web-icon-active': isWebSearchEnabled }" />
|
||||
<span class="d-none d-sm-block web-text">Scenario</span>
|
||||
</VBtn>
|
||||
|
||||
<VMenu v-model="showProjectMenu" location="top">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props" :color="selectedProject === '+ New Project'
|
||||
? 'primary'
|
||||
: selectedProject
|
||||
? 'white'
|
||||
: 'secondary'
|
||||
" variant="text" density="comfortable" class="text-none">
|
||||
<span class="d-none d-sm-block">
|
||||
{{ selectedProject || "Project Menu" }}
|
||||
</span>
|
||||
<span class="d-block d-sm-none"> Project </span>
|
||||
|
||||
<VIcon icon="tabler-chevron-down" class="ms-1" />
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList density="compact" max-height="200">
|
||||
<VListItem v-for="option in projectOptions" :key="option" @click="handleProjectSelect(option)" :class="{
|
||||
'bg-primary text-white':
|
||||
option === selectedProject &&
|
||||
option !== '+ New Project',
|
||||
}">
|
||||
<template #prepend v-if="option === selectedProject && option !== '+ New Project'
|
||||
">
|
||||
</template>
|
||||
|
||||
<VListItemTitle :class="option === '+ New Project' ? 'text-primary' : ''">
|
||||
{{ option }}
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
|
||||
<!-- <VMenu v-model="showModelMenu" location="top">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props" :color="activeModelColor" variant="text" class="text-none model-select-btn"
|
||||
density="comfortable">
|
||||
<span class="d-none d-sm-block">{{
|
||||
selectedModelName
|
||||
}}</span>
|
||||
<span class="d-block d-sm-none">Model</span>
|
||||
<VIcon icon="tabler-chevron-down" class="ms-1"></VIcon>
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList density="compact" max-height="300">
|
||||
<VListItem v-for="model in models" :key="model.identifier" @click="handleModelChange(model)" :class="{
|
||||
'bg-primary text-white':
|
||||
selectedModelIdentifier === model.identifier,
|
||||
}">
|
||||
<template #prepend>
|
||||
<div class="model-color-indicator me-2"
|
||||
:style="`background-color: var(--v-theme-${model.color}); width: 12px; height: 12px; border-radius: 50%`">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #append v-if="selectedModelIdentifier === model.identifier">
|
||||
</template>
|
||||
|
||||
<VListItemTitle>{{ model.name }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu> -->
|
||||
<div v-else class="normal-input-ui">
|
||||
<div class="position-relative">
|
||||
<VTextarea v-model="msg" auto-grow rows="1" row-height="30"
|
||||
:disabled="isInputDisabled || isConfirmationActive" hide-details variant="plain" persistent-placeholder
|
||||
density="comfortable" class="chat-textarea" placeholder="Type your message..." no-resize
|
||||
@keydown="handleKeyDown" @compositionstart="handleCompositionStart"
|
||||
@compositionend="handleCompositionEnd"></VTextarea>
|
||||
</div>
|
||||
|
||||
<VBtn v-if="!isBotTyping" icon :color="activeModelColor" @click="sendMessage" :disabled="isInputDisabled ||
|
||||
(!msg.trim() && selectedAttachments.length === 0)
|
||||
">
|
||||
<VIcon icon="tabler-send"></VIcon>
|
||||
</VBtn>
|
||||
<div v-if="showSuggestions" class="suggestions-dropdown rounded pa-2">
|
||||
<div class="suggestions-header text-caption text-grey-darken-1 mb-1 px-2">
|
||||
Suggestions
|
||||
</div>
|
||||
<div v-for="(suggestion, index) in suggestions" :key="index"
|
||||
class="suggestion-item pa-2 rounded d-flex align-center" :class="{
|
||||
'suggestion-selected': selectedSuggestionIndex === index,
|
||||
}" @click="selectSuggestion(suggestion)" @mouseenter="selectedSuggestionIndex = index">
|
||||
<VIcon icon="tabler-search" size="16" class="me-2 text-grey-darken-1"></VIcon>
|
||||
<span class="suggestion-text">{{ suggestion }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VBtn v-else icon :color="activeModelColor" @click="handleStop">
|
||||
<VIcon icon="tabler-square"></VIcon>
|
||||
</VBtn>
|
||||
<div v-if="showCommandList" class="command-dropdown rounded pa-2">
|
||||
<div v-for="(cmd, i) in filteredCommands" :key="i" class="command-item pa-2 rounded"
|
||||
@click="selectCommand(cmd)">
|
||||
{{ cmd }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center justify-space-between mt-1 input-toolbar">
|
||||
<div class="d-flex gap-2 align-center toolbar-buttons">
|
||||
<VBtn icon variant="text" density="comfortable"
|
||||
color="rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity))" @click="resetChat">
|
||||
<VIcon icon="tabler-message-circle-plus" />
|
||||
</VBtn>
|
||||
|
||||
<VBtn icon variant="text" density="comfortable" :color="activeModelColor" @click="triggerFileInput">
|
||||
<VIcon icon="tabler-paperclip"></VIcon>
|
||||
<input ref="fileInputRef" type="file" multiple class="d-none" @change="handleFileUpload" />
|
||||
</VBtn>
|
||||
|
||||
<VBtn icon variant="text" density="comfortable" :color="activeModelColor" @click="startRecording"
|
||||
:disabled="!isVoiceRecordingAvailable">
|
||||
<VIcon icon="tabler-microphone" />
|
||||
</VBtn>
|
||||
|
||||
<VBtn :color="isWebSearchEnabled ? 'primary' : 'grey-darken-1'"
|
||||
:variant="isWebSearchEnabled ? 'tonal' : 'text'" :elevation="isWebSearchEnabled ? 8 : 2"
|
||||
density="comfortable" class="text-none web-search-btn"
|
||||
:class="{ 'web-search-active': isWebSearchEnabled }" @click="toggleWebSearch">
|
||||
<VIcon icon="tabler-analyze" class="me-1 web-icon"
|
||||
:class="{ 'web-icon-active': isWebSearchEnabled }" />
|
||||
<span class="d-none d-sm-block web-text">Scenario</span>
|
||||
</VBtn>
|
||||
|
||||
<VMenu v-model="showProjectMenu" location="top">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props" :color="selectedProject === '+ New Project'
|
||||
? 'primary'
|
||||
: selectedProject
|
||||
? 'white'
|
||||
: 'secondary'
|
||||
" variant="text" density="comfortable" class="text-none">
|
||||
<span class="d-none d-sm-block">
|
||||
{{ selectedProject || "Project Menu" }}
|
||||
</span>
|
||||
<span class="d-block d-sm-none"> Project </span>
|
||||
|
||||
<VIcon icon="tabler-chevron-down" class="ms-1" />
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList density="compact" max-height="200">
|
||||
<VListItem v-for="option in projectOptions" :key="option" @click="handleProjectSelect(option)"
|
||||
:class="{
|
||||
'bg-primary text-white':
|
||||
option === selectedProject &&
|
||||
option !== '+ New Project',
|
||||
}">
|
||||
<template #prepend v-if="option === selectedProject && option !== '+ New Project'
|
||||
">
|
||||
</template>
|
||||
|
||||
<VListItemTitle :class="option === '+ New Project' ? 'text-primary' : ''">
|
||||
{{ option }}
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</div>
|
||||
|
||||
<VBtn v-if="!isBotTyping" icon :color="activeModelColor" @click="sendMessage" :disabled="isInputDisabled ||
|
||||
(!msg.trim() && selectedAttachments.length === 0 && !voiceMessage)
|
||||
">
|
||||
<VIcon icon="tabler-send"></VIcon>
|
||||
</VBtn>
|
||||
|
||||
<VBtn v-else icon :color="activeModelColor" @click="handleStop">
|
||||
<VIcon icon="tabler-square"></VIcon>
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="quick-replies-fade" mode="out-in" appear>
|
||||
<div v-if="isQuickRepliesVisible && !activeForm && !activeMultiForm && !isConfirmationActive"
|
||||
class="quick-replies-container" key="quick-replies">
|
||||
<div v-if="
|
||||
isQuickRepliesVisible &&
|
||||
!activeForm &&
|
||||
!activeMultiForm &&
|
||||
!isConfirmationActive &&
|
||||
!isRecording &&
|
||||
!voiceMessage &&
|
||||
!isBotTyping
|
||||
" class="quick-replies-container" key="quick-replies">
|
||||
<TransitionGroup name="quick-reply" appear>
|
||||
<div v-for="(reply, index) in quickReplies" :key="reply" class="quick-reply-item"
|
||||
:style="{ transitionDelay: `${index * 50}ms` }">
|
||||
<VBtn class="quick-reply-transparent" variant="text" size="small" :style="`border: 1px solid rgba(var(--v-theme-${activeModelColor}), 0.5) !important;
|
||||
--hover-bg-color: rgba(var(--v-theme-${activeModelColor}), 0.1);
|
||||
--hover-border-color: rgba(var(--v-theme-${activeModelColor}), 0.8)`"
|
||||
@click="selectQuickReply(reply)">
|
||||
--hover-bg-color: rgba(var(--v-theme-${activeModelColor}), 0.1);
|
||||
--hover-border-color: rgba(var(--v-theme-${activeModelColor}), 0.8)`" @click="selectQuickReply(reply)">
|
||||
{{ reply }}
|
||||
</VBtn>
|
||||
</div>
|
||||
@@ -1524,7 +1907,7 @@ const commands = COMMANDS;
|
||||
<VListItemTitle>{{ file.name }}</VListItemTitle>
|
||||
<VListItemSubtitle>{{
|
||||
getFileSize(file.size)
|
||||
}}</VListItemSubtitle>
|
||||
}}</VListItemSubtitle>
|
||||
<template v-slot:append>
|
||||
<VBtn icon size="small" variant="text" @click="removeAttachment(index)">
|
||||
<VIcon icon="tabler-x"></VIcon>
|
||||
|
||||
Reference in New Issue
Block a user