refactor: Improve voice and response modals UX
- Center both modals with dark backdrop and blur effect - Make voice modal larger (420px) with bigger record button - Make response modal larger (540px) with bigger text (18px) - Remove auto-dismiss from bubbles - manual dismiss only - Add backdrop click to close response modal - Remove unused bottom sheet code from FloatingVoice - Add touch protection CSS to prevent text selection - Clean up mobile-specific variables no longer needed
This commit is contained in:
@@ -308,9 +308,6 @@ onMounted(async () => {
|
||||
},
|
||||
getMessages: () => {
|
||||
return responseRef.value?.getMessages() || []
|
||||
},
|
||||
move: (x: number, y: number) => {
|
||||
responseRef.value?.move(x, y)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -624,6 +621,11 @@ watch(() => route.name, (newPage) => {
|
||||
z-index: 9998;
|
||||
overflow: visible;
|
||||
backdrop-filter: blur(10px);
|
||||
/* Prevent text selection and touch gestures */
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.terminal-fab::before {
|
||||
@@ -976,6 +978,11 @@ watch(() => route.name, (newPage) => {
|
||||
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 9998;
|
||||
/* Prevent text selection and touch gestures */
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.voice-fab:hover {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onBeforeUnmount } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
export interface ResponseMessage {
|
||||
id: string
|
||||
@@ -9,29 +9,12 @@ export interface ResponseMessage {
|
||||
}
|
||||
|
||||
const messages = ref<ResponseMessage[]>([])
|
||||
const isDragging = ref(false)
|
||||
const position = ref({ x: 0, y: 0 })
|
||||
const hasCustomPosition = ref(false)
|
||||
const dragOffset = ref({ x: 0, y: 0 })
|
||||
|
||||
const isVisible = computed(() => messages.value.length > 0)
|
||||
|
||||
// Default position: bottom-left, above the terminal FAB
|
||||
function getDefaultPosition() {
|
||||
return {
|
||||
x: 20,
|
||||
y: window.innerHeight - 120
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(message: string, type: ResponseMessage['type'] = 'info') {
|
||||
const id = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
|
||||
|
||||
// If no custom position, set default position
|
||||
if (!hasCustomPosition.value) {
|
||||
position.value = getDefaultPosition()
|
||||
}
|
||||
|
||||
messages.value.push({
|
||||
id,
|
||||
message,
|
||||
@@ -39,12 +22,7 @@ function addMessage(message: string, type: ResponseMessage['type'] = 'info') {
|
||||
timestamp: Date.now()
|
||||
})
|
||||
|
||||
// Auto-dismiss after 10 seconds for non-error messages
|
||||
if (type !== 'error') {
|
||||
setTimeout(() => {
|
||||
removeMessage(id)
|
||||
}, 10000)
|
||||
}
|
||||
// No auto-dismiss - user must dismiss each message manually
|
||||
|
||||
return id
|
||||
}
|
||||
@@ -60,64 +38,6 @@ function clearAll() {
|
||||
messages.value = []
|
||||
}
|
||||
|
||||
function startDrag(e: MouseEvent) {
|
||||
if ((e.target as HTMLElement).closest('.close-btn')) return
|
||||
|
||||
isDragging.value = true
|
||||
const container = document.querySelector('.floating-response') as HTMLElement
|
||||
if (container) {
|
||||
const rect = container.getBoundingClientRect()
|
||||
if (!hasCustomPosition.value) {
|
||||
position.value = { x: rect.left, y: rect.top }
|
||||
}
|
||||
dragOffset.value = {
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', onDrag)
|
||||
document.addEventListener('mouseup', stopDrag)
|
||||
}
|
||||
|
||||
function onDrag(e: MouseEvent) {
|
||||
if (!isDragging.value) return
|
||||
|
||||
const newX = e.clientX - dragOffset.value.x
|
||||
const newY = e.clientY - dragOffset.value.y
|
||||
|
||||
// Keep within viewport with some tolerance
|
||||
const maxX = window.innerWidth - 100
|
||||
const maxY = window.innerHeight - 50
|
||||
|
||||
position.value = {
|
||||
x: Math.max(0, Math.min(newX, maxX)),
|
||||
y: Math.max(0, Math.min(newY, maxY))
|
||||
}
|
||||
}
|
||||
|
||||
function stopDrag() {
|
||||
isDragging.value = false
|
||||
hasCustomPosition.value = true
|
||||
document.removeEventListener('mousemove', onDrag)
|
||||
document.removeEventListener('mouseup', stopDrag)
|
||||
}
|
||||
|
||||
const containerStyle = computed(() => {
|
||||
if (!hasCustomPosition.value) {
|
||||
return {
|
||||
bottom: '120px',
|
||||
left: '20px'
|
||||
}
|
||||
}
|
||||
return {
|
||||
top: `${position.value.y}px`,
|
||||
left: `${position.value.x}px`,
|
||||
bottom: 'auto',
|
||||
right: 'auto'
|
||||
}
|
||||
})
|
||||
|
||||
function getTypeIcon(type: ResponseMessage['type']) {
|
||||
switch (type) {
|
||||
case 'success': return '✓'
|
||||
@@ -136,43 +56,38 @@ function getTypeColor(type: ResponseMessage['type']) {
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousemove', onDrag)
|
||||
document.removeEventListener('mouseup', stopDrag)
|
||||
})
|
||||
|
||||
// Expose controls for MCP tools
|
||||
defineExpose({
|
||||
addMessage,
|
||||
removeMessage,
|
||||
clearAll,
|
||||
getMessages: () => messages.value,
|
||||
move: (x: number, y: number) => {
|
||||
position.value = { x, y }
|
||||
hasCustomPosition.value = true
|
||||
}
|
||||
getMessages: () => messages.value
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<!-- Backdrop -->
|
||||
<Transition name="backdrop-fade">
|
||||
<div v-if="isVisible" class="response-backdrop" @click="clearAll"></div>
|
||||
</Transition>
|
||||
|
||||
<Transition name="bubble-slide">
|
||||
<div
|
||||
v-if="isVisible"
|
||||
class="floating-response"
|
||||
:class="{ dragging: isDragging }"
|
||||
:style="containerStyle"
|
||||
>
|
||||
<div class="response-glass">
|
||||
<!-- Header -->
|
||||
<div class="response-header" @mousedown="startDrag">
|
||||
<div class="response-header">
|
||||
<div class="header-left">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span>Agent Response</span>
|
||||
<span class="message-count">{{ messages.length }}</span>
|
||||
</div>
|
||||
<button class="close-btn" @click="clearAll" title="Clear all">
|
||||
<button class="close-btn" @click="clearAll" title="Dismiss all">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.5"/>
|
||||
<line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.5"/>
|
||||
@@ -191,8 +106,8 @@ defineExpose({
|
||||
>
|
||||
<span class="type-icon" :class="msg.type">{{ getTypeIcon(msg.type) }}</span>
|
||||
<span class="message-text">{{ msg.message }}</span>
|
||||
<button class="dismiss-btn" @click="removeMessage(msg.id)">
|
||||
<svg width="8" height="8" viewBox="0 0 10 10">
|
||||
<button class="dismiss-btn" @click="removeMessage(msg.id)" title="Dismiss">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.5"/>
|
||||
<line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
@@ -207,22 +122,49 @@ defineExpose({
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Backdrop */
|
||||
.response-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 10009;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.backdrop-fade-enter-active,
|
||||
.backdrop-fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.backdrop-fade-enter-from,
|
||||
.backdrop-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.floating-response {
|
||||
position: fixed;
|
||||
min-width: 280px;
|
||||
max-width: 420px;
|
||||
z-index: 9997;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 540px;
|
||||
max-width: 92vw;
|
||||
max-height: 80vh;
|
||||
z-index: 10010;
|
||||
}
|
||||
|
||||
.response-glass {
|
||||
background: rgba(200, 215, 235, 0.45);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 80vh;
|
||||
background: rgba(200, 215, 235, 0.35);
|
||||
backdrop-filter: blur(24px) saturate(1.6);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.6);
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(80, 120, 180, 0.25),
|
||||
0 8px 32px rgba(0, 0, 0, 0.2),
|
||||
0 12px 40px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -231,38 +173,45 @@ defineExpose({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 8px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.floating-response.dragging .response-header {
|
||||
cursor: grabbing;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #333;
|
||||
font: 500 11px/1 system-ui, sans-serif;
|
||||
gap: 8px;
|
||||
color: #222;
|
||||
font: 600 13px/1 system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.header-left svg {
|
||||
opacity: 0.7;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.message-count {
|
||||
background: rgba(99, 102, 241, 0.8);
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 3px;
|
||||
border-radius: 6px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
@@ -275,128 +224,129 @@ defineExpose({
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
padding: 8px;
|
||||
max-height: 300px;
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--type-color);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
gap: 14px;
|
||||
padding: 18px 20px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 12px;
|
||||
border-left: 5px solid var(--type-color);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.message-item:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
background: var(--type-color);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
color: #111;
|
||||
word-break: break-word;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.dismiss-btn {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #999;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 6px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.message-item:hover .dismiss-btn {
|
||||
opacity: 1;
|
||||
/* Prevent text selection */
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.dismiss-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #666;
|
||||
background: linear-gradient(180deg, #e66 0%, #c33 100%);
|
||||
border-color: #a22;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.messages-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.messages-container::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.messages-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.messages-container::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.bubble-slide-enter-active,
|
||||
.bubble-slide-leave-active {
|
||||
transition: all 0.25s ease;
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.bubble-slide-enter-from,
|
||||
.bubble-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
}
|
||||
|
||||
.message-enter-active {
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.message-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.message-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
}
|
||||
|
||||
.message-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.floating-response {
|
||||
left: 10px !important;
|
||||
right: 10px !important;
|
||||
bottom: 80px !important;
|
||||
max-width: none;
|
||||
min-width: auto;
|
||||
}
|
||||
transform: scale(0.9);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -93,83 +93,16 @@ const selectedDeviceId = ref<string>('')
|
||||
const showMicSelector = ref(false)
|
||||
|
||||
// ============ MOBILE DETECTION & AUDIO FORMAT ============
|
||||
const isMobile = ref(false)
|
||||
const isAndroid = ref(false)
|
||||
const isMobilePTT = ref(false) // Mobile push-to-talk active
|
||||
const supportedMimeType = ref('audio/webm;codecs=opus')
|
||||
const sheetHeight = ref(45) // percentage of viewport for mobile
|
||||
const isDraggingSheet = ref(false)
|
||||
const sheetDragStart = ref({ y: 0, height: 0 })
|
||||
const keyboardHeight = ref(0)
|
||||
const snapPoints = [25, 45, 70] // collapsed, default, expanded
|
||||
let mobilePTTTimeout: number | null = null
|
||||
|
||||
function checkMobile() {
|
||||
const ua = navigator.userAgent
|
||||
isMobile.value = window.innerWidth <= 640 || /iPhone|iPad|iPod|Android/i.test(ua)
|
||||
isAndroid.value = /Android/i.test(ua)
|
||||
}
|
||||
|
||||
// Virtual keyboard detection
|
||||
function setupKeyboardDetection() {
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.addEventListener('resize', handleViewportResize)
|
||||
}
|
||||
}
|
||||
|
||||
function handleViewportResize() {
|
||||
if (!window.visualViewport || !isMobile.value) return
|
||||
|
||||
const viewportHeight = window.visualViewport.height
|
||||
const windowHeight = window.innerHeight
|
||||
const diff = windowHeight - viewportHeight
|
||||
|
||||
if (diff > 100) {
|
||||
keyboardHeight.value = diff
|
||||
// Auto-expand when keyboard opens
|
||||
if (sheetHeight.value < 45 && isOpen.value) {
|
||||
sheetHeight.value = 45
|
||||
}
|
||||
} else {
|
||||
keyboardHeight.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
// Find nearest snap point
|
||||
function findNearestSnap(height: number): number {
|
||||
return snapPoints.reduce((prev, curr) =>
|
||||
Math.abs(curr - height) < Math.abs(prev - height) ? curr : prev
|
||||
)
|
||||
}
|
||||
|
||||
// Sheet touch handlers
|
||||
function startSheetDrag(e: TouchEvent) {
|
||||
if (!isMobile.value) return
|
||||
const touch = e.touches[0]
|
||||
if (!touch) return
|
||||
|
||||
isDraggingSheet.value = true
|
||||
sheetDragStart.value = { y: touch.clientY, height: sheetHeight.value }
|
||||
}
|
||||
|
||||
function onSheetDrag(e: TouchEvent) {
|
||||
if (!isDraggingSheet.value || !isMobile.value) return
|
||||
const touch = e.touches[0]
|
||||
if (!touch) return
|
||||
|
||||
const deltaY = sheetDragStart.value.y - touch.clientY
|
||||
const deltaPercent = (deltaY / window.innerHeight) * 100
|
||||
const newHeight = sheetDragStart.value.height + deltaPercent
|
||||
|
||||
sheetHeight.value = Math.max(20, Math.min(80, newHeight))
|
||||
}
|
||||
|
||||
function stopSheetDrag() {
|
||||
if (!isDraggingSheet.value) return
|
||||
isDraggingSheet.value = false
|
||||
sheetHeight.value = findNearestSnap(sheetHeight.value)
|
||||
}
|
||||
|
||||
function detectAudioFormat(): string {
|
||||
// Test formats in order of preference
|
||||
const formats = [
|
||||
@@ -307,31 +240,11 @@ function closeMicSelector(e: MouseEvent) {
|
||||
}
|
||||
|
||||
const containerStyle = computed(() => {
|
||||
// Mobile: bottom sheet
|
||||
if (isMobile.value) {
|
||||
const heightPx = keyboardHeight.value > 0
|
||||
? `calc(${sheetHeight.value}vh - ${keyboardHeight.value}px)`
|
||||
: `${sheetHeight.value}vh`
|
||||
|
||||
return {
|
||||
inset: 'auto 0 0 0',
|
||||
width: '100%',
|
||||
height: heightPx,
|
||||
maxHeight: keyboardHeight.value > 0
|
||||
? `calc(100vh - ${keyboardHeight.value}px)`
|
||||
: '80vh'
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop: floating window
|
||||
if (!hasCustomPosition.value) {
|
||||
return { bottom: '80px', left: '16px' }
|
||||
}
|
||||
// Centered modal for both mobile and desktop
|
||||
return {
|
||||
top: `${position.value.y}px`,
|
||||
left: `${position.value.x}px`,
|
||||
bottom: 'auto',
|
||||
right: 'auto'
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)'
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1148,12 +1061,8 @@ onMounted(async () => {
|
||||
document.addEventListener('keydown', handleKeyDown, { capture: true })
|
||||
document.addEventListener('keyup', handleKeyUp, { capture: true })
|
||||
|
||||
// Mobile detection
|
||||
// Android detection for speech recognition mode
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
|
||||
// Virtual keyboard detection for mobile
|
||||
setupKeyboardDetection()
|
||||
|
||||
// Detect supported audio format
|
||||
supportedMimeType.value = detectAudioFormat()
|
||||
@@ -1201,10 +1110,6 @@ onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousemove', onDrag)
|
||||
document.removeEventListener('mouseup', stopDrag)
|
||||
document.removeEventListener('click', closeMicSelector)
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.removeEventListener('resize', handleViewportResize)
|
||||
}
|
||||
if (holdTimeout) clearTimeout(holdTimeout)
|
||||
})
|
||||
|
||||
@@ -1254,37 +1159,21 @@ defineExpose({
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<!-- Backdrop -->
|
||||
<Transition name="backdrop-fade">
|
||||
<div v-if="isOpen" class="voice-backdrop" @click="close"></div>
|
||||
</Transition>
|
||||
|
||||
<Transition name="voice-slide">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
ref="containerRef"
|
||||
class="voice-window"
|
||||
:class="{
|
||||
dragging: isDragging,
|
||||
mobile: isMobile,
|
||||
'sheet-dragging': isDraggingSheet
|
||||
}"
|
||||
:style="containerStyle"
|
||||
>
|
||||
<div class="glass">
|
||||
<!-- Mobile drag handle -->
|
||||
<div
|
||||
v-if="isMobile"
|
||||
class="sheet-handle"
|
||||
@touchstart.passive="startSheetDrag"
|
||||
@touchmove.prevent="onSheetDrag"
|
||||
@touchend="stopSheetDrag"
|
||||
>
|
||||
<div class="handle-bar"></div>
|
||||
</div>
|
||||
<!-- Titlebar -->
|
||||
<div
|
||||
class="titlebar"
|
||||
@mousedown="startDrag"
|
||||
@touchstart.passive="startSheetDrag"
|
||||
@touchmove.prevent="onSheetDrag"
|
||||
@touchend="stopSheetDrag"
|
||||
>
|
||||
<div class="titlebar">
|
||||
<div class="left">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
||||
@@ -1367,7 +1256,7 @@ defineExpose({
|
||||
<span class="final">{{ animatedTranscript }}</span><span class="cursor" v-if="animatedTranscript && animatedTranscript.length < transcript.length">|</span>
|
||||
<span class="interim">{{ interimTranscript }}</span>
|
||||
<span v-if="!animatedTranscript && !interimTranscript" class="placeholder">
|
||||
{{ isMobile ? 'Mantén presionado el micrófono para grabar...' : 'Presiona el micrófono o mantén Ctrl+Space...' }}
|
||||
Mantén presionado el micrófono o usa Ctrl+Space...
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1383,15 +1272,15 @@ defineExpose({
|
||||
@touchstart="handleRecTouchStart"
|
||||
@touchend="handleRecTouchEnd"
|
||||
@touchcancel="handleRecTouchEnd"
|
||||
:title="isRecording ? 'Stop' : (isMobile ? 'Mantén presionado para grabar' : 'Record')"
|
||||
:title="isRecording ? 'Stop' : 'Mantén presionado para grabar'"
|
||||
>
|
||||
<svg v-if="!isRecording" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg v-if="!isRecording" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
||||
<path d="M19 10v2a7 7 0 0 1-14 0v-2" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
|
||||
<line x1="8" y1="23" x2="16" y2="23" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg v-else width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<rect x="6" y="6" width="12" height="12" rx="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
@@ -1439,10 +1328,31 @@ defineExpose({
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Backdrop */
|
||||
.voice-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 10009;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.backdrop-fade-enter-active,
|
||||
.backdrop-fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.backdrop-fade-enter-from,
|
||||
.backdrop-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.voice-window {
|
||||
position: fixed;
|
||||
width: 320px;
|
||||
z-index: 9998;
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
z-index: 10010;
|
||||
}
|
||||
|
||||
.voice-window.dragging {
|
||||
@@ -1742,15 +1652,15 @@ defineExpose({
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 12px;
|
||||
min-height: 80px;
|
||||
max-height: 150px;
|
||||
padding: 16px 20px;
|
||||
min-height: 120px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.transcript {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
@@ -1798,17 +1708,22 @@ defineExpose({
|
||||
}
|
||||
|
||||
.rec-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #f5f5f5 0%, #ddd 100%);
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(0, 0, 0, 0.15);
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
/* Prevent text selection and touch gestures */
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.rec-btn:hover {
|
||||
@@ -1831,19 +1746,6 @@ defineExpose({
|
||||
box-shadow: 0 0 20px rgba(249, 115, 22, 0.6);
|
||||
}
|
||||
|
||||
/* Make rec button bigger on mobile */
|
||||
@media (pointer: coarse) {
|
||||
.rec-btn {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.rec-btn svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
@@ -1898,72 +1800,12 @@ defineExpose({
|
||||
/* Transitions */
|
||||
.voice-slide-enter-active,
|
||||
.voice-slide-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.voice-slide-enter-from,
|
||||
.voice-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.95);
|
||||
}
|
||||
|
||||
/* Mobile bottom sheet styles */
|
||||
.voice-window.mobile {
|
||||
width: 100% !important;
|
||||
transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.voice-window.mobile.sheet-dragging {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.voice-window.mobile .glass {
|
||||
height: 100%;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
|
||||
.sheet-handle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sheet-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.handle-bar {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.voice-window.mobile .titlebar {
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.voice-window.mobile .content {
|
||||
flex: 1;
|
||||
min-height: 60px;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.voice-window.mobile .controls {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Mobile animations */
|
||||
.voice-window.mobile.voice-slide-enter-from,
|
||||
.voice-window.mobile.voice-slide-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,6 @@ export interface ResponseControls {
|
||||
removeMessage: (id: string) => void
|
||||
clearAll: () => void
|
||||
getMessages: () => Array<{ id: string; message: string; type: string; timestamp: number }>
|
||||
move: (x: number, y: number) => void
|
||||
}
|
||||
|
||||
// Global reference to response controls (set by App.vue)
|
||||
|
||||
Reference in New Issue
Block a user