nucleo000/agent-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Improve voice and response modals UX

Browse Source 
- 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:
josedario87
2026-02-14 05:07:27 -06:00
parent f9b5ad3db6
commit 2133e2d057
4 changed files with 182 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
frontend/src/components/FloatingResponse.vue
View File

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

264
frontend/src/components/FloatingVoice.vue
View File

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