Skip to content

Commit ca6d7f2

Browse files
vijaythecodervijaythecoder
committed
refactor: clean up navigation and improve UX
- Remove V2 badge from MainV2.vue - Remove Audio Test and Agent V2 links from navigation - Remove Agent V1 link for cleaner navigation - Remove Mock Mode button from UI - Add console commands for mock mode (window.clueless.enableMockMode/disableMockMode) - Improve connection status display with better visual representation - Show 'Connected' in green, 'Connecting...' in yellow with animation - Use 'Not Connected' instead of 'disconnected' - Add color-coded text and smooth transitions - Simplify developer tools to essential commands only
1 parent db8903b commit ca6d7f2

File tree

4 files changed

+64
-88
lines changed

4 files changed

+64
-88
lines changed

‎resources/js/components/RealtimeAgent/Navigation/ConnectionStatus.vue

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
<template>
22
<div class="flex items-center gap-1.5">
3-
<div
4-
:class="[
5-
'h-2 w-2 rounded-full',
6-
connectionStatus === 'connected'
7-
? 'bg-green-500'
8-
: connectionStatus === 'connecting'
9-
? 'animate-pulse bg-yellow-500'
10-
: 'bg-red-500',
11-
]"
12-
></div>
13-
<span class="text-xs text-gray-600 dark:text-gray-400">
14-
{{ connectionStatus }}
3+
<div class="relative">
4+
<div
5+
:class="[
6+
'h-2 w-2 rounded-full transition-all duration-300',
7+
connectionStatus === 'connected'
8+
? 'bg-green-500'
9+
: connectionStatus === 'connecting'
10+
? 'bg-yellow-500'
11+
: 'bg-gray-400',
12+
]"
13+
></div>
14+
<!-- Pulse animation for connecting state -->
15+
<div
16+
v-if="connectionStatus === 'connecting'"
17+
class="absolute inset-0 h-2 w-2 animate-ping rounded-full bg-yellow-500 opacity-75"
18+
></div>
19+
</div>
20+
<span class="text-xs font-medium capitalize">
21+
<span v-if="connectionStatus === 'connected'" class="text-green-600 dark:text-green-400">
22+
Connected
23+
</span>
24+
<span v-else-if="connectionStatus === 'connecting'" class="text-yellow-600 dark:text-yellow-400">
25+
Connecting...
26+
</span>
27+
<span v-else class="text-gray-500 dark:text-gray-400">
28+
Not Connected
29+
</span>
1530
</span>
1631
</div>
1732
</template>

‎resources/js/components/RealtimeAgent/Navigation/MobileMenu.vue

Lines changed: 9 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -100,41 +100,15 @@
100100
<span class="font-medium">{{ isOverlayMode ? 'ON' : 'OFF' }}</span>
101101
</button>
102102

103-
<!-- Navigation Links -->
104-
<div class="border-t border-gray-100 pt-3 space-y-2 dark:border-gray-800">
105-
<button
106-
@click="handleDashboardClick"
107-
:disabled="isActive"
108-
class="w-full text-left text-xs text-gray-600 dark:text-gray-400"
109-
:class="{ 'cursor-not-allowed opacity-50': isActive }"
110-
>
111-
View Call History →
112-
</button>
113-
114-
<a
115-
href="/audio-test"
116-
class="block w-full text-left text-xs text-gray-600 dark:text-gray-400"
117-
@click="closeMobileMenu"
118-
>
119-
Audio Test →
120-
</a>
121-
122-
<a
123-
href="/realtime-agent"
124-
class="block w-full text-left text-xs text-gray-600 dark:text-gray-400"
125-
@click="closeMobileMenu"
126-
>
127-
Agent V1 →
128-
</a>
129-
130-
<a
131-
href="/realtime-agent-v2"
132-
class="block w-full text-left text-xs text-gray-600 dark:text-gray-400"
133-
@click="closeMobileMenu"
134-
>
135-
Agent V2 →
136-
</a>
137-
</div>
103+
<!-- Call History Link -->
104+
<button
105+
@click="handleDashboardClick"
106+
:disabled="isActive"
107+
class="w-full border-t border-gray-100 pt-3 text-left text-xs text-gray-600 dark:border-gray-800 dark:text-gray-400"
108+
:class="{ 'cursor-not-allowed opacity-50': isActive }"
109+
>
110+
View Call History →
111+
</button>
138112
</div>
139113
</div>
140114
</template>

‎resources/js/components/RealtimeAgent/Navigation/TitleBar.vue

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,6 @@
5050

5151
<!-- Overlay Mode Toggle -->
5252
<OverlayModeToggle v-if="isOverlaySupported" />
53-
54-
<!-- Mock Mode Toggle -->
55-
<MockModeToggle />
5653

5754
<!-- Actions -->
5855
<button
@@ -64,28 +61,6 @@
6461
Call History
6562
</button>
6663

67-
<!-- Navigation Links -->
68-
<a
69-
href="/audio-test"
70-
class="text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
71-
>
72-
Audio Test
73-
</a>
74-
75-
<a
76-
href="/realtime-agent"
77-
class="text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
78-
>
79-
Agent V1
80-
</a>
81-
82-
<a
83-
href="/realtime-agent-v2"
84-
class="text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
85-
>
86-
Agent V2
87-
</a>
88-
8964
<button
9065
@click="toggleSession"
9166
class="rounded-md px-4 py-1.5 text-xs font-medium transition-colors"
@@ -123,7 +98,6 @@ import CoachSelector from './CoachSelector.vue';
12398
import ConnectionStatus from './ConnectionStatus.vue';
12499
import ScreenProtectionToggle from './ScreenProtectionToggle.vue';
125100
import OverlayModeToggle from './OverlayModeToggle.vue';
126-
import MockModeToggle from './MockModeToggle.vue';
127101
128102
// Props
129103
// eslint-disable-next-line @typescript-eslint/no-unused-vars

‎resources/js/pages/RealtimeAgent/MainV2.vue

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1027,6 +1027,29 @@ watch(selectedTemplate, (newTemplate) => {
10271027
}
10281028
});
10291029
1030+
// Developer console methods
1031+
const enableMockMode = () => {
1032+
console.log('🎭 Enabling mock mode with pre-loaded data...');
1033+
realtimeStore.enableMockMode();
1034+
console.log('✅ Mock mode enabled with conversation history, insights, and action items');
1035+
return 'Mock mode enabled';
1036+
};
1037+
1038+
const disableMockMode = () => {
1039+
console.log('🎭 Disabling mock mode...');
1040+
realtimeStore.disableMockMode();
1041+
console.log('✅ Mock mode disabled');
1042+
return 'Mock mode disabled';
1043+
};
1044+
1045+
// Expose to window for console access
1046+
if (typeof window !== 'undefined') {
1047+
(window as any).clueless = {
1048+
enableMockMode,
1049+
disableMockMode,
1050+
};
1051+
}
1052+
10301053
// Lifecycle
10311054
onMounted(() => {
10321055
initialize();
@@ -1035,6 +1058,11 @@ onMounted(() => {
10351058
document.addEventListener('click', () => {
10361059
settingsStore.closeAllDropdowns();
10371060
});
1061+
1062+
// Log developer console commands
1063+
console.log('🛠️ Developer Commands Available:');
1064+
console.log(' window.clueless.enableMockMode() - Load mock conversation data');
1065+
console.log(' window.clueless.disableMockMode() - Disable mock mode');
10381066
});
10391067
10401068
onUnmounted(async () => {
@@ -1049,21 +1077,6 @@ onUnmounted(async () => {
10491077
</script>
10501078

10511079
<style>
1052-
/* V2 Badge - for testing */
1053-
.title-bar::after {
1054-
content: 'V2';
1055-
position: absolute;
1056-
right: 10px;
1057-
top: 50%;
1058-
transform: translateY(-50%);
1059-
background: #3b82f6;
1060-
color: white;
1061-
padding: 2px 8px;
1062-
border-radius: 4px;
1063-
font-size: 10px;
1064-
font-weight: 600;
1065-
}
1066-
10671080
/* Apple-style Glassmorphism */
10681081
.glass-card {
10691082
background: rgba(255, 255, 255, 0.7);

0 commit comments

Comments
 (0)