feat(chat): 增加语音输入功能

- 新增 VoiceInput 组件用于语音输入
- 在 ChatInterface 中集成语音输入功能
- 优化 ChatInput 组件,支持聚焦方法
- 调整输入区域布局和样式以支持语音输入
This commit is contained in:
Lexcubia 2025-04-25 17:03:12 +08:00
parent 2616b53858
commit f7dd3b43fe
3 changed files with 476 additions and 275 deletions

View File

@ -72,10 +72,27 @@
<el-tag size="large" type="info" class="end-tag">会话已结束</el-tag>
</div>
</div>
<ChatInput
:is-input-disabled="isInputDisabled"
@send="sendMessage"
/>
<!-- Input Area Wrapper -->
<div class="input-area-wrapper">
<el-button
class="mode-switch-btn"
:icon="isVoiceInputMode ? ChatDotSquare : Microphone"
circle
@click="switchInputMode"
:disabled="isInputDisabled"
/>
<ChatInput
v-if="!isVoiceInputMode"
:is-disabled="isInputDisabled"
@send="handleSendMessage"
ref="chatInputRef"
/>
<VoiceInput
v-else
:is-disabled="isInputDisabled"
@sendText="handleSendMessage"
/>
</div>
<!-- 总结弹窗 -->
<div v-if="lastMessageWithDafen" class="summary-panel" :class="{ 'summary-panel-collapsed': isSummaryCollapsed }">
<div class="summary-header" @click="toggleSummary">
@ -97,8 +114,9 @@ import * as echarts from 'echarts'
import { useChatStore } from '@/store/chat'
import ChatHeader from '@/views/chat/components/ChatHeader.vue'
import ChatInput from '@/views/chat/components/ChatInput.vue'
import { ElTag, ElButton, ElInput, ElAvatar } from 'element-plus'
import { Plus, CaretBottom, CaretRight } from '@element-plus/icons-vue'
import VoiceInput from '@/views/chat/components/VoiceInput.vue'
import { ElTag, ElButton, ElInput, ElAvatar, ElIcon } from 'element-plus'
import { Plus, CaretBottom, CaretRight, Microphone, ChatDotSquare } from '@element-plus/icons-vue'
import userAvatarUrl from '@/assets/user.png';
import customAvatarUrl from '@/assets/custom.png';
@ -109,6 +127,7 @@ defineOptions({
const chatStore = useChatStore()
const messageInput = ref('')
const messageInputRef = ref(null)
const chatInputRef = ref(null)
const chatContainer = ref(null)
const scoreChart = ref(null)
const maxRows = 6
@ -119,6 +138,7 @@ const lastScrollHeight = ref(0)
const isSummaryCollapsed = ref(false)
const showBackgroundDialog = ref(false)
const showBackground = ref(false)
const isVoiceInputMode = ref(false)
// 使
const currentMessages = computed(() => {
@ -224,13 +244,22 @@ watch(() => currentMessages.value?.map(msg => msg.respondingType), (newTypes, ol
}
}, { deep: true })
//
const sendMessage = (message) => {
if (!message.trim() && !sendButtonsDisabled.value) return
chatStore.sendMessage(message)
shouldAutoScroll.value = true //
scrollToBottom(true)
}
// Unified message sending function
const handleSendMessage = (message) => {
if (!message || !message.trim() || isInputDisabled.value) return;
console.log("ChatInterface sending message:", message);
chatStore.sendMessage(message);
shouldAutoScroll.value = true; //
scrollToBottom(true);
// If coming from voice input, switch back to text mode and focus
if (isVoiceInputMode.value) {
isVoiceInputMode.value = false;
nextTick(() => {
chatInputRef.value?.focus();
});
}
};
//
const formatMarkdown = (text, tagType) => {
@ -272,6 +301,17 @@ const toggleBackground = () => {
showBackground.value = !showBackground.value
}
// Method to switch input mode
const switchInputMode = () => {
isVoiceInputMode.value = !isVoiceInputMode.value;
// Focus the text input when switching back
if (!isVoiceInputMode.value) {
nextTick(() => {
chatInputRef.value?.focus();
});
}
};
onMounted(() => {
if (chatContainer.value) {
chatContainer.value.addEventListener('scroll', handleScroll)
@ -279,7 +319,6 @@ onMounted(() => {
scrollToBottom(true)
shouldAutoScroll.value = true
}
})
onUnmounted(() => {
@ -303,7 +342,7 @@ onUnmounted(() => {
// Dark mode override for chat container
html.dark .chat-container {
background-color: var(--el-color-primary-dark-1); // Use the new lighter dark shade
background-color: var(--el-color-primary-dark-1);
}
.chat-background {
@ -652,258 +691,27 @@ html.dark .background-section .background-content {
}
}
.input-area {
.input-area-wrapper {
display: flex;
align-items: flex-end;
& > :deep(.chat-input-area),
& > :deep(div > .voice-trigger-btn) {
flex: 1;
min-width: 0;
}
gap: 8px;
padding: 16px 20px;
border-top: 1px solid var(--el-border-color-light);
background-color: var(--el-bg-color);
position: relative;
z-index: 1;
.el-textarea {
flex: 1;
:deep(.el-textarea__inner) {
border-radius: 8px;
resize: none;
padding: 8px 12px;
min-height: 40px !important;
max-height: 120px;
line-height: 24px;
font-size: 14px;
&:disabled {
background-color: var(--el-input-disabled-bg);
cursor: not-allowed;
}
}
}
.send-btn {
height: 40px;
padding: 0 20px;
border-radius: 8px;
font-size: 14px;
}
}
// Dark mode override for input area
html.dark .input-area {
background: var(--el-color-primary-dark-1); // Dark 1 (Lighter dark)
border-top-color: var(--el-border-color-dark); // Use standard dark border
}
:deep(.el-button) {
.mode-switch-btn {
width: 40px;
height: 40px;
padding: 0 20px;
font-size: 14px;
border-radius: 4px;
font-weight: 500;
&.is-disabled {
background-color: var(--el-fill-color-light) !important;
border-color: var(--el-border-color) !important;
color: var(--el-text-color-placeholder) !important;
cursor: not-allowed;
}
&.new-chat-btn {
--el-button-bg-color: var(--el-fill-color-light);
--el-button-border-color: var(--el-border-color);
--el-button-text-color: var(--el-text-color-regular);
--el-button-hover-bg-color: var(--el-fill-color);
--el-button-hover-border-color: var(--el-border-color-hover);
--el-button-hover-text-color: var(--el-text-color-primary);
--el-button-active-bg-color: var(--el-fill-color);
--el-button-active-border-color: var(--el-border-color-hover);
--el-button-active-text-color: var(--el-text-color-primary);
padding: 0 16px;
font-size: 14px;
display: flex;
align-items: center;
white-space: nowrap;
height: 40px;
transition: all 0.3s;
&:hover {
background-color: var(--el-button-hover-bg-color);
border-color: var(--el-button-hover-border-color);
color: var(--el-button-hover-text-color);
}
&:active {
background-color: var(--el-button-active-bg-color);
border-color: var(--el-button-active-border-color);
color: var(--el-button-active-text-color);
}
&.is-disabled {
background-color: var(--el-fill-color-light) !important;
border-color: var(--el-border-color) !important;
color: var(--el-text-color-placeholder) !important;
cursor: not-allowed;
}
}
}
:deep(.el-button.new-chat-btn > span) {
margin-left: 0 !important;
}
:deep(.el-button--primary) {
--el-button-bg-color: var(--el-color-primary);
--el-button-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary-light-3);
--el-button-hover-border-color: var(--el-color-primary-light-3);
--el-button-active-bg-color: var(--el-color-primary-light-3);
--el-button-active-border-color: var(--el-color-primary-light-3);
}
.new-chat-btn {
display: flex;
align-items: center;
padding: 0 16px;
white-space: nowrap;
}
.send-btn {
min-width: 80px;
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
.input-area {
padding: 12px;
gap: 8px;
.new-chat-btn {
padding: 0 12px;
min-width: 70px;
}
}
:deep(.el-button) {
padding: 0 12px;
&.new-chat-btn {
.el-icon {
display: none;
}
}
}
.new-chat-btn {
padding: 0 12px;
}
.send-btn {
min-width: 60px;
}
}
/* 统一的滚动条样式 */
.chat-messages,
.summary-content,
.evaluation-content,
.background-content {
&::-webkit-scrollbar {
width: 8px;
height: 8px;
display: block;
}
&::-webkit-scrollbar-track {
background: transparent;
margin: 4px 0;
}
&::-webkit-scrollbar-thumb {
background: var(--el-border-color-darker);
border-radius: 4px;
border: 2px solid transparent;
background-clip: padding-box;
&:hover {
background: var(--el-border-color);
}
}
}
/* 添加媒体查询以适应不同屏幕 */
@media screen and (max-width: 768px) {
.message-content {
max-width: 85%;
}
.message .message-wrapper.user {
padding-left: 10%;
}
}
@media screen and (max-width: 480px) {
.message-content {
max-width: 90%;
}
.message .message-wrapper.user {
padding-left: 5%;
}
}
.user {
.message-text {
border-color: transparent;
&::before {
border-right-color: var(--el-color-primary);
right: 100%;
transform: scaleX(-1);
}
}
}
.assistant {
.message-text {
background-color: var(--el-bg-color);
border-color: var(--el-border-color-lighter);
&::before {
border-right-color: var(--el-bg-color);
right: 100%;
}
}
}
.typing {
&::after {
display: none;
}
}
.typing-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
height: 20px;
span {
width: 4px;
height: 4px;
background: var(--el-text-color-placeholder);
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
&:nth-child(1) { animation-delay: -0.32s; }
&:nth-child(2) { animation-delay: -0.16s; }
}
}
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
font-size: 20px;
flex-shrink: 0; // Prevent shrinking
}
.summary-panel {

View File

@ -1,5 +1,5 @@
<template>
<div class="input-area">
<div class="chat-input-area">
<el-input
v-model="messageInput"
type="textarea"
@ -23,7 +23,7 @@
</template>
<script setup>
import { ref, computed } from 'vue'
import { ref } from 'vue'
import { ElInput, ElButton } from 'element-plus'
const props = defineProps({
@ -40,14 +40,19 @@ const messageInputRef = ref(null)
const maxRows = 6
const handleSend = () => {
if (!messageInput.value.trim() && !props.isInputDisabled) return
if (!messageInput.value.trim() || props.isInputDisabled) return
emit('send', messageInput.value)
messageInput.value = ''
messageInputRef.value.style.height = 'auto'
}
// Expose focus method
defineExpose({
focus: () => messageInputRef.value?.focus()
})
const adjustTextareaHeight = () => {
const textarea = messageInputRef.value
const textarea = messageInputRef.value?.$el?.querySelector('textarea')
textarea.style.height = 'auto'
const newHeight = Math.min(textarea.scrollHeight, maxRows * 24)
textarea.style.height = newHeight + 'px'
@ -55,12 +60,11 @@ const adjustTextareaHeight = () => {
</script>
<style lang="scss" scoped>
.input-area {
.chat-input-area {
display: flex;
flex: 1;
align-items: flex-end;
gap: 8px;
padding: 16px 20px;
border-top: 1px solid var(--el-border-color-light);
background-color: var(--el-bg-color);
position: relative;
z-index: 1;
@ -90,24 +94,15 @@ const adjustTextareaHeight = () => {
border-radius: 8px;
font-size: 14px;
min-width: 80px;
flex-shrink: 0;
}
}
// Dark mode override for input area
html.dark .input-area {
background: var(--el-color-primary-dark-1);
border-top-color: var(--el-border-color-dark);
}
/* 移动端适配 */
/* Mobile adjustments */
@media screen and (max-width: 768px) {
.input-area {
padding: 12px;
gap: 8px;
}
.send-btn {
min-width: 60px;
padding: 0 12px;
}
}
</style>

View File

@ -0,0 +1,398 @@
<template>
<div class="voice-input-container">
<!-- Voice Mode Trigger Button -->
<el-button
class="voice-trigger-btn"
@click="openVoiceModal"
v-if="!showVoiceModal"
:disabled="isDisabled"
>
点击 说话
</el-button>
<!-- Teleport the modal and overlay to the body -->
<Teleport to="body">
<!-- Voice Input Modal -->
<div class="voice-input-modal-overlay" v-if="showVoiceModal">
<div class="voice-bubble">
<!-- TODO: Add voice visualizer here -->
<div class="voice-wave-placeholder">语音波形区域</div>
</div>
<div class="voice-modal-controls">
<div class="modal-control-item">
<span class="modal-btn-label">取消</span>
<el-button class="modal-btn cancel-btn" circle @click="cancelVoiceInputFromModal">
<el-icon><Close /></el-icon>
</el-button>
</div>
<div class="modal-control-item">
<span class="modal-btn-label record-label">{{ isRecording ? '完成' : ' ' }}</span>
<el-button
class="modal-btn confirm-btn"
:type="isRecording ? 'danger' : 'primary'"
circle
@click="confirmVoiceInput"
:icon="isRecording ? ChatDotSquare : Microphone"
>
</el-button>
</div>
<div class="modal-control-item">
<span class="modal-btn-label">转文字</span>
<el-button class="modal-btn text-send-btn" circle @click="sendAsText">
<el-icon><ChatDotSquare /></el-icon>
</el-button>
</div>
</div>
<div class="voice-modal-tip">{{ isRecording ? '正在录音...' : '点击麦克风开始录音' }}</div>
</div>
<!-- Voice-to-Text Conversion Overlay -->
<div class="voice-to-text-overlay" v-if="isVoiceToTextConverting">
<div class="voice-to-text-content">
<div class="converting-indicator"></div>
<div class="converting-text">转文字发送</div>
</div>
</div>
</Teleport>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElButton, ElMessage, ElIcon } from 'element-plus'
import { Microphone, ChatDotSquare, Close } from '@element-plus/icons-vue'
// Props definition
const props = defineProps({
isDisabled: {
type: Boolean,
default: false
}
})
// Emits definition
const emit = defineEmits(['sendText'])
// Refs related to voice input
const isRecording = ref(false)
const isVoiceToTextConverting = ref(false)
const showVoiceModal = ref(false)
let mediaRecorder = null
let audioChunks = []
// --- Voice Input Logic ---
const openVoiceModal = () => {
if (props.isDisabled) return;
showVoiceModal.value = true;
// Reset state in case modal was closed unexpectedly before
isRecording.value = false;
audioChunks = [];
}
const closeVoiceModal = () => {
showVoiceModal.value = false;
if (isRecording.value) {
stopRecording(); // Stop recording if modal is closed while recording
isRecording.value = false;
}
}
const cancelVoiceInputFromModal = () => {
closeVoiceModal();
}
const confirmVoiceInput = async () => {
if (!isRecording.value) {
// Start recording
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
startRecording(stream);
isRecording.value = true;
} catch (err) {
ElMessage.error('无法访问麦克风,请检查权限设置');
console.error('获取麦克风权限失败:', err);
closeVoiceModal(); // Close modal on error
}
} else {
// Stop recording and process
stopRecording();
isRecording.value = false;
if (audioChunks.length === 0) {
ElMessage.warning('录音时间太短');
closeVoiceModal();
return;
}
isVoiceToTextConverting.value = true; // Show converting overlay
closeVoiceModal(); // Close the modal after stopping
// Simulate conversion & emit result
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
console.log('录音完成,模拟转换,音频大小:', audioBlob.size);
setTimeout(() => {
const simulatedText = "模拟语音识别结果" + Date.now(); // Example text
emit('sendText', simulatedText);
isVoiceToTextConverting.value = false;
audioChunks = []; // Clear chunks after processing
}, 1500);
}
}
const sendAsText = () => {
// Currently, just acts like confirm/stop
if (isRecording.value) {
confirmVoiceInput();
} else {
// If not recording, maybe do nothing or just close?
closeVoiceModal();
}
}
const startRecording = (stream) => {
audioChunks = []; // Clear previous chunks
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
audioChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
// Stop associated media stream tracks
mediaRecorder.stream.getTracks().forEach(track => track.stop());
// Note: Actual processing is now triggered in confirmVoiceInput after calling stopRecording
};
mediaRecorder.onerror = (event) => {
console.error('MediaRecorder error:', event.error);
ElMessage.error('录音出错');
isRecording.value = false; // Reset state on error
closeVoiceModal();
};
mediaRecorder.start();
}
const stopRecording = () => {
if (mediaRecorder && mediaRecorder.state === 'recording') {
try {
mediaRecorder.stop();
} catch (error) {
console.error("Error stopping MediaRecorder:", error);
// Attempt to stop tracks directly as a fallback
if (mediaRecorder.stream) {
mediaRecorder.stream.getTracks().forEach(track => track.stop());
}
}
}
// Reset recorder instance
mediaRecorder = null;
}
// --- Lifecycle hooks ---
onMounted(() => {
if (!('MediaRecorder' in window) || !navigator.mediaDevices) {
console.warn('浏览器不支持语音录制功能');
// Optionally disable voice functionality entirely
}
})
onUnmounted(() => {
stopRecording(); // Ensure recording is stopped on component unmount
})
</script>
<style lang="scss" scoped>
.voice-input-container {
width: 100%;
}
.voice-trigger-btn {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
min-height: 40px;
width: 100%;
height: 40px;
box-sizing: border-box;
}
// Styles for the Voice Input Modal
.voice-input-modal-overlay {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 3000;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding-bottom: 30px;
}
.voice-bubble {
background-color: #4CAF50;
color: white;
padding: 15px 25px;
border-radius: 15px;
margin-bottom: 40px;
min-width: 150px;
text-align: center;
position: relative;
.voice-wave-placeholder {
font-size: 14px;
}
&::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #4CAF50;
}
}
.voice-modal-controls {
display: flex;
justify-content: space-around;
align-items: flex-start;
width: 100%;
max-width: 350px;
margin-bottom: 15px;
}
.modal-control-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.modal-btn-label {
font-size: 12px;
color: #b0b0b0;
margin-bottom: 8px;
min-height: 18px;
}
.record-label {
color: white;
}
.modal-btn {
width: 60px;
height: 60px;
font-size: 24px;
}
.confirm-btn .el-icon {
font-size: 28px;
}
.cancel-btn,
.text-send-btn {
background-color: rgba(255, 255, 255, 0.2);
border: none;
color: white;
&:hover {
background-color: rgba(255, 255, 255, 0.3);
}
}
.voice-modal-tip {
color: #a0a0a0;
font-size: 13px;
min-height: 20px;
}
// Styles for Voice-to-Text Conversion Overlay
.voice-to-text-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2001; // Ensure it's above the voice modal if somehow both appear
display: flex;
align-items: center;
justify-content: center;
}
.voice-to-text-content {
background-color: white;
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.converting-indicator {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--el-color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.converting-text {
font-size: 16px;
color: #333;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
// Dark mode styles for VoiceInput elements
html.dark .voice-bubble {
// Adjust bubble color for dark mode if needed
}
html.dark .modal-btn-label {
color: #707070;
}
html.dark .record-label {
color: #d0d0d0;
}
html.dark .cancel-btn,
html.dark .text-send-btn {
background-color: rgba(0, 0, 0, 0.3);
color: #ccc;
&:hover {
background-color: rgba(0, 0, 0, 0.4);
}
}
html.dark .voice-modal-tip {
color: #707070;
}
html.dark .voice-to-text-content {
background-color: #333;
}
html.dark .converting-text {
color: #eee;
}
</style>