moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:add voice input

Browse Source
This commit is contained in:
Moein Moradi
2025-09-28 13:46:57 +03:30
parent 617bddefa1
commit 8cff4275b6
2 changed files with 904 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

703
resources/js/pages/apps/chat.vue
View File

@@ -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>

446
resources/styles/chat-app.scss
View File

@@ -138,7 +138,8 @@
}
@keyframes pulse-enhanced {
0%, 100% {
0%,
100% {
transform: scale(0.6);
opacity: 0.4;
}
@@ -248,7 +249,8 @@
}
.message-bubble.is-deleting {
animation: delete-message-bubble 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
animation: delete-message-bubble 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53)
forwards;
}
/* Typing indicator */
@@ -271,7 +273,8 @@
background-color: #9e9e9e;
box-shadow: none;
margin: 0 2px;
animation: pulse-enhanced 1.8s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
animation: pulse-enhanced 1.8s infinite
cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:nth-child(2) {
animation-delay: 0.3s;
@@ -322,7 +325,9 @@
&:hover,
&:focus-within {
border-color: v-bind("`rgb(var(--v-theme-${activeModelColor}))`");
box-shadow: v-bind("`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`");
box-shadow: v-bind(
"`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`"
);
transform: translateY(-1px) scale(1.005);
}
}
@@ -441,10 +446,18 @@
border: 1px solid transparent;
animation: suggestion-fade-in 0.3s ease-out;
&:nth-child(1) { animation-delay: 0.1s; }
&:nth-child(2) { animation-delay: 0.15s; }
&:nth-child(3) { animation-delay: 0.2s; }
&:nth-child(4) { animation-delay: 0.25s; }
&:nth-child(1) {
animation-delay: 0.1s;
}
&:nth-child(2) {
animation-delay: 0.15s;
}
&:nth-child(3) {
animation-delay: 0.2s;
}
&:nth-child(4) {
animation-delay: 0.25s;
}
&:hover,
&.suggestion-selected {
@@ -586,7 +599,10 @@
width: 100%;
background-color: transparent !important;
box-shadow: none !important;
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
color: rgba(
var(--v-theme-on-background),
var(--v-high-emphasis-opacity)
) !important;
font-size: 0.78rem;
border-radius: 20px !important;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -594,19 +610,30 @@
overflow: hidden;
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
transition: left 0.5s ease;
}
&:hover {
background-color: var(--hover-bg-color, rgba(var(--v-theme-primary), 0.1)) !important;
border-color: var(--hover-border-color, rgba(var(--v-theme-primary), 0.8)) !important;
background-color: var(
--hover-bg-color,
rgba(var(--v-theme-primary), 0.1)
) !important;
border-color: var(
--hover-border-color,
rgba(var(--v-theme-primary), 0.8)
) !important;
transform: translateY(-5px) scale(1.05) rotateZ(0.5deg);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
@@ -617,27 +644,27 @@
}
/* Quick reply staggered animations */
.quick-reply-item:nth-child(1) {
.quick-reply-item:nth-child(1) {
transition-delay: 0ms;
animation-delay: 0.05s;
}
.quick-reply-item:nth-child(2) {
.quick-reply-item:nth-child(2) {
transition-delay: 60ms;
animation-delay: 0.1s;
}
.quick-reply-item:nth-child(3) {
.quick-reply-item:nth-child(3) {
transition-delay: 120ms;
animation-delay: 0.15s;
}
.quick-reply-item:nth-child(4) {
.quick-reply-item:nth-child(4) {
transition-delay: 180ms;
animation-delay: 0.2s;
}
.quick-reply-item:nth-child(5) {
.quick-reply-item:nth-child(5) {
transition-delay: 240ms;
animation-delay: 0.25s;
}
.quick-reply-item:nth-child(6) {
.quick-reply-item:nth-child(6) {
transition-delay: 300ms;
animation-delay: 0.3s;
}
@@ -727,7 +754,8 @@
/* Web search button animations */
@keyframes webPulseImproved {
0%, 100% {
0%,
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
filter: drop-shadow(0 0 8px rgba(var(--v-theme-primary), 0.5)) brightness(1);
@@ -735,41 +763,45 @@
25% {
transform: scale(1.1) rotate(90deg);
opacity: 0.9;
filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7)) brightness(1.1);
filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7))
brightness(1.1);
}
50% {
transform: scale(1.05) rotate(180deg);
opacity: 0.8;
filter: drop-shadow(0 0 15px rgba(var(--v-theme-primary), 0.8)) brightness(1.2);
filter: drop-shadow(0 0 15px rgba(var(--v-theme-primary), 0.8))
brightness(1.2);
}
75% {
transform: scale(1.08) rotate(270deg);
opacity: 0.9;
filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7)) brightness(1.1);
filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7))
brightness(1.1);
}
}
@keyframes webActiveHoverImproved {
0% {
transform: scale(1.1) rotate(-3deg);
filter: drop-shadow(0 0 10px rgba(var(--v-theme-primary), 0.6)) brightness(1.1);
filter: drop-shadow(0 0 10px rgba(var(--v-theme-primary), 0.6))
brightness(1.1);
}
100% {
transform: scale(1.2) rotate(3deg);
filter: drop-shadow(0 0 16px rgba(var(--v-theme-primary), 0.8)) brightness(1.3);
filter: drop-shadow(0 0 16px rgba(var(--v-theme-primary), 0.8))
brightness(1.3);
}
}
@keyframes webGlowImproved {
0%, 100% {
box-shadow:
0 0 20px rgba(var(--v-theme-primary), 0.4),
0%,
100% {
box-shadow: 0 0 20px rgba(var(--v-theme-primary), 0.4),
0 4px 15px rgba(var(--v-theme-primary), 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
50% {
box-shadow:
0 0 30px rgba(var(--v-theme-primary), 0.6),
box-shadow: 0 0 30px rgba(var(--v-theme-primary), 0.6),
0 6px 20px rgba(var(--v-theme-primary), 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
@@ -785,15 +817,15 @@
min-width: 100px;
&::before {
content: '';
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(
circle,
rgba(var(--v-theme-primary), 0.15) 0%,
circle,
rgba(var(--v-theme-primary), 0.15) 0%,
rgba(var(--v-theme-primary), 0.05) 50%,
transparent 70%
);
@@ -805,16 +837,16 @@
}
&::after {
content: '';
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
transition: left 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -842,8 +874,7 @@
&:focus {
outline: none;
box-shadow:
0 0 0 3px rgba(var(--v-theme-primary), 0.2),
box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.2),
0 4px 15px rgba(var(--v-theme-primary), 0.1);
}
@@ -897,13 +928,12 @@
/* Web search button states */
.web-search-btn.web-search-active {
background: linear-gradient(
135deg,
rgba(var(--v-theme-primary), 0.9) 0%,
135deg,
rgba(var(--v-theme-primary), 0.9) 0%,
rgba(var(--v-theme-primary), 0.7) 100%
) !important;
border: 2px solid rgba(var(--v-theme-primary), 0.3);
box-shadow:
0 0 20px rgba(var(--v-theme-primary), 0.4),
box-shadow: 0 0 20px rgba(var(--v-theme-primary), 0.4),
0 4px 15px rgba(var(--v-theme-primary), 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
animation: webGlowImproved 3s ease-in-out infinite;
@@ -1113,7 +1143,8 @@
}
@keyframes gentle-pulse {
0%, 100% {
0%,
100% {
box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.2);
}
50% {
@@ -1174,21 +1205,38 @@
overflow: hidden;
/* Staggered animations for each option */
&:nth-child(1) { animation-delay: 0.5s; }
&:nth-child(2) { animation-delay: 0.6s; }
&:nth-child(3) { animation-delay: 0.7s; }
&:nth-child(4) { animation-delay: 0.8s; }
&:nth-child(5) { animation-delay: 0.9s; }
&:nth-child(6) { animation-delay: 1.0s; }
&:nth-child(1) {
animation-delay: 0.5s;
}
&:nth-child(2) {
animation-delay: 0.6s;
}
&:nth-child(3) {
animation-delay: 0.7s;
}
&:nth-child(4) {
animation-delay: 0.8s;
}
&:nth-child(5) {
animation-delay: 0.9s;
}
&:nth-child(6) {
animation-delay: 1s;
}
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
z-index: 1;
}
@@ -1243,10 +1291,18 @@
opacity: 0;
animation-fill-mode: forwards;
&:nth-child(1) { animation-delay: 0.5s; }
&:nth-child(2) { animation-delay: 0.6s; }
&:nth-child(3) { animation-delay: 0.7s; }
&:nth-child(4) { animation-delay: 0.8s; }
&:nth-child(1) {
animation-delay: 0.5s;
}
&:nth-child(2) {
animation-delay: 0.6s;
}
&:nth-child(3) {
animation-delay: 0.7s;
}
&:nth-child(4) {
animation-delay: 0.8s;
}
span:first-child {
color: rgba(var(--v-theme-on-surface), 0.8);
@@ -1274,13 +1330,18 @@
overflow: hidden;
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
z-index: 1;
}
@@ -1329,19 +1390,32 @@
position: relative;
overflow: hidden;
&:nth-child(1) { animation-delay: 0.2s; }
&:nth-child(2) { animation-delay: 0.3s; }
&:nth-child(3) { animation-delay: 0.4s; }
&:nth-child(4) { animation-delay: 0.5s; }
&:nth-child(1) {
animation-delay: 0.2s;
}
&:nth-child(2) {
animation-delay: 0.3s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
&:nth-child(4) {
animation-delay: 0.5s;
}
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
z-index: 1;
}
@@ -1387,19 +1461,32 @@
position: relative;
overflow: hidden;
&:nth-child(1) { animation-delay: 0.3s; }
&:nth-child(2) { animation-delay: 0.4s; }
&:nth-child(3) { animation-delay: 0.5s; }
&:nth-child(4) { animation-delay: 0.6s; }
&:nth-child(1) {
animation-delay: 0.3s;
}
&:nth-child(2) {
animation-delay: 0.4s;
}
&:nth-child(3) {
animation-delay: 0.5s;
}
&:nth-child(4) {
animation-delay: 0.6s;
}
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
z-index: 1;
}
@@ -1567,11 +1654,11 @@
background: rgba(var(--v-theme-surface), 0.6) !important;
border: 1px solid rgba(var(--v-theme-outline), 0.3);
}
.web-search-btn::before {
background: radial-gradient(
circle,
rgba(var(--v-theme-primary), 0.2) 0%,
circle,
rgba(var(--v-theme-primary), 0.2) 0%,
rgba(var(--v-theme-primary), 0.1) 50%,
transparent 70%
);
@@ -1579,22 +1666,22 @@
}
.quick-replies-fade-leave-active {
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.quick-replies-fade-leave-to {
opacity: 0;
transform: translateY(-8px);
opacity: 0;
transform: translateY(-8px);
}
.quick-replies-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-gap: 8px;
margin-bottom: 8px;
width: 100%;
margin-top: 1rem !important;
animation: replies-container-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-gap: 8px;
margin-bottom: 8px;
width: 100%;
margin-top: 1rem !important;
animation: replies-container-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ==========================================
@@ -1639,7 +1726,9 @@
&:hover,
&:focus-within {
border-color: v-bind("`rgb(var(--v-theme-${activeModelColor}))`");
box-shadow: v-bind("`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`");
box-shadow: v-bind(
"`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`"
);
transform: translateY(-1px) scale(1.005) translateZ(0);
transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
@@ -1749,4 +1838,191 @@
.quick-replies-fade-leave-from {
margin-top: 0.8rem !important;
}
}
}
.recording-indicator {
width: 8px;
height: 8px;
background-color: #f44336;
border-radius: 50%;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.voice-message-display {
padding: 8px 12px;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 16px;
margin-top: 8px;
}
.voice-recording-controls {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
background-color: rgba(var(--v-theme-surface), 0.8);
border-radius: 20px;
backdrop-filter: blur(8px);
}
.recording-duration {
font-family: monospace;
font-size: 12px;
color: var(--v-theme-on-surface);
min-width: 30px;
text-align: center;
}
.voice-ready-indicator {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background-color: rgba(var(--active-model-color), 0.1);
border-radius: 16px;
border: 1px solid rgba(var(--active-model-color), 0.3);
}
.voice-message-bubble {
background: linear-gradient(
135deg,
rgba(var(--active-model-color), 0.1),
rgba(var(--active-model-color), 0.05)
);
border: 1px solid rgba(var(--active-model-color), 0.2);
}
.voice-controls-container {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.voice-recording-ui {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
}
.voice-waveform {
display: flex;
align-items: center;
gap: 2px;
height: 28px;
flex: 1;
justify-content: space-between;
padding: 0 8px;
}
.waveform-bar {
width: 3px;
background: rgba(var(--active-model-color), 0.7);
border-radius: 2px;
transition: height 0.1s ease;
animation: waveform 1.5s ease-in-out infinite;
animation-delay: var(--delay);
}
@keyframes waveform {
0%, 100% {
height: 6px;
opacity: 0.5;
}
50% {
height: 20px;
opacity: 1;
}
}
.voice-controls-wrapper {
position: relative;
display: flex;
align-items: center;
}
.recording-time {
position: absolute;
top: -20px;
right: 50%;
transform: translateX(50%);
font-family: 'Courier New', monospace;
font-size: 11px;
color: rgba(var(--v-theme-on-surface), 0.7);
background: rgba(var(--v-theme-surface), 0.9);
padding: 2px 6px;
border-radius: 8px;
white-space: nowrap;
}
.voice-controls {
display: flex;
gap: 8px;
align-items: center;
}
.voice-btn {
min-width: 36px;
min-height: 36px;
}
.voice-preview-ui {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
}
.voice-preview-content {
display: flex;
align-items: center;
gap: 8px;
padding-left: 8px;
}
.voice-preview-text {
font-weight: 500;
color: rgba(var(--v-theme-on-surface), 0.8);
font-size: 14px;
}
.voice-duration {
font-size: 12px;
color: rgba(var(--v-theme-on-surface), 0.6);
}
.normal-input-ui {
width: 100%;
}
.waveform-visualizer {
flex: 1;
display: flex;
align-items: center;
height: 40px;
padding: 0 8px;
}
.waveform-visualizer canvas {
width: 100%;
height: 100%;
}