Fix realtime analytics and improve responsiveness

vijaythecoder · vijaythecoder · commit fe91d8ec7ecb · 2025-07-21T13:32:03.000-05:00
- Remove screen darkening effect from protection mode
- Update card backgrounds to white for better contrast in light theme
- Remove shadows from transcription message bubbles
- Update system messages to professional gray theme
- Fix WebSocket connection errors by correcting parameter names
- Implement smart transcript grouping to combine messages from same speaker
- Fix tool configuration format for coach session
- Add 5-second time window for message grouping

These changes improve the visual appearance and functionality of the realtime agent interface.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -210,10 +210,6 @@
     inset: 0;
     pointer-events: none;
     z-index: 10;
-    /* Dark overlay effect for both light and dark modes */
-    background: rgba(0, 0, 0, 0.08);
-    backdrop-filter: blur(0.5px);
-    -webkit-backdrop-filter: blur(0.5px);
     border-radius: 0.5rem;
 }
 
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
@@ -10,7 +10,7 @@ import AppLogo from './AppLogo.vue';
 const mainNavItems: NavItem[] = [
     {
         title: 'Realtime Agent',
-        href: '/realtime-agent',
+        href: '/realtime-agent-v2',
         icon: Phone,
     },
     {
diff --git a/resources/js/components/ContextualInformation.vue b/resources/js/components/ContextualInformation.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex h-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900"
+        class="flex h-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
     >
         <div class="mb-3 flex items-center justify-between">
             <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Contextual Information</h3>
@@ -24,7 +24,7 @@
                     leave-from-class="transform opacity-100 scale-100"
                     leave-to-class="transform opacity-0 scale-95"
                 >
-                    <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900" :key="relevantSection.title">
+                    <div class="rounded-lg border border-gray-200 bg-gray-100 p-3 dark:border-gray-700 dark:bg-gray-800" :key="relevantSection.title">
                         <h4 class="mb-1 text-xs font-semibold text-gray-700 uppercase dark:text-gray-300">
                             {{ relevantSection.title }}
                         </h4>
diff --git a/resources/js/components/RealtimeAgent/Actions/CommitmentsList.vue b/resources/js/components/RealtimeAgent/Actions/CommitmentsList.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900"
+        class="flex flex-col rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
     >
         <h3 class="mb-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Commitments Made</h3>
 
diff --git a/resources/js/components/RealtimeAgent/Actions/PostCallActions.vue b/resources/js/components/RealtimeAgent/Actions/PostCallActions.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900"
+        class="flex flex-col rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
     >
         <h3 class="mb-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Post-Call Actions</h3>
 
diff --git a/resources/js/components/RealtimeAgent/Content/CustomerIntelligence.vue b/resources/js/components/RealtimeAgent/Content/CustomerIntelligence.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="rounded-lg border border-gray-200 bg-gray-50 p-4 transition-all duration-300 dark:border-gray-700 dark:bg-gray-900"
+        class="rounded-lg border border-gray-200 bg-white p-4 transition-all duration-300 dark:border-gray-700 dark:bg-gray-900"
         :class="{ 'animate-fadeIn': intelligenceUpdating }"
     >
         <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-gray-100">
@@ -12,13 +12,13 @@
 
         <!-- Intent & Stage -->
         <div class="mb-3 grid grid-cols-2 gap-3">
-            <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-900">
+            <div class="rounded-lg bg-gray-100 p-3 dark:bg-gray-800">
                 <p class="text-xs text-gray-600 dark:text-gray-400">Intent</p>
                 <p class="text-sm font-medium text-gray-900 capitalize dark:text-gray-100">
                     {{ customerIntelligence.intent }}
                 </p>
             </div>
-            <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-900">
+            <div class="rounded-lg bg-gray-100 p-3 dark:bg-gray-800">
                 <p class="text-xs text-gray-600 dark:text-gray-400">Stage</p>
                 <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                     {{ customerIntelligence.buyingStage }}
diff --git a/resources/js/components/RealtimeAgent/Content/DiscussionTopics.vue b/resources/js/components/RealtimeAgent/Content/DiscussionTopics.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900"
+        class="flex flex-col rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
     >
         <h3 class="mb-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Discussion Topics</h3>
 
diff --git a/resources/js/components/RealtimeAgent/Content/KeyInsights.vue b/resources/js/components/RealtimeAgent/Content/KeyInsights.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex h-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900"
+        class="flex h-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
     >
         <h3 class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">Key Insights</h3>
 
diff --git a/resources/js/components/RealtimeAgent/Content/LiveTranscription.vue b/resources/js/components/RealtimeAgent/Content/LiveTranscription.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="col-span-1 h-full">
-        <div class="flex h-full flex-col rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900">
+        <div class="flex h-full flex-col rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <!-- Transcription Header -->
             <div class="border-b border-gray-200 px-4 py-3 dark:border-gray-700">
                 <div class="flex items-center justify-between">
@@ -39,10 +39,10 @@
                 >
                     <div
                         :class="[
-                            'animate-fadeIn inline-block max-w-[70%] rounded-lg border p-3 shadow-sm',
+                            'animate-fadeIn inline-block max-w-[70%] rounded-lg border p-3',
                             group.role === 'salesperson' ? 'border-blue-50 bg-blue-50 text-left dark:border-blue-900/20 dark:bg-blue-900/20' : '',
                             group.role === 'customer' ? 'border-gray-200 bg-gray-100 text-left dark:border-gray-700 dark:bg-gray-700' : '',
-                            group.role === 'system' ? 'border-yellow-100 bg-yellow-50 text-center text-sm dark:border-yellow-900/20 dark:bg-yellow-900/20' : ''
+                            group.role === 'system' ? 'border-gray-200 bg-gray-50 text-center text-sm dark:border-gray-700 dark:bg-gray-800' : ''
                         ]"
                     >
                         <div class="min-w-0">
diff --git a/resources/js/components/RealtimeAgent/Content/TalkingPoints.vue b/resources/js/components/RealtimeAgent/Content/TalkingPoints.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900"
+        class="flex flex-col rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
         v-if="selectedTemplate?.talking_points?.length > 0"
     >
         <div class="mb-3 flex items-center justify-between">
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
@@ -18,7 +18,7 @@ const features = [
         icon: Mic,
         title: 'Realtime Agent',
         description: 'Voice conversations with real-time AI coaching',
-        href: '/realtime-agent',
+        href: '/realtime-agent-v2',
         color: 'text-green-600 dark:text-green-400',
     },
     {
diff --git a/resources/js/pages/RealtimeAgent/MainV2.vue b/resources/js/pages/RealtimeAgent/MainV2.vue
@@ -510,7 +510,7 @@ const initializeAgents = async (apiKey: string) => {
                 },
                 voice: 'alloy',
                 temperature: 0.8,
-                max_output_tokens: 4096,
+                max_response_output_tokens: 4096,
             },
         });
         console.log('✅ Salesperson session configured for audio transcription');
@@ -535,11 +535,9 @@ Call multiple functions per statement if relevant. Don't wait for complete thoug
         // Convert tools to the format expected by OpenAI
         const toolDefinitions = coachingTools.map(tool => ({
             type: 'function',
-            function: {
-                name: tool.name,
-                description: tool.description,
-                parameters: tool.parameters,
-            }
+            name: tool.name,
+            description: tool.description,
+            parameters: tool.parameters,
         }));
         
         coachSession.transport.sendEvent({
@@ -560,7 +558,7 @@ Call multiple functions per statement if relevant. Don't wait for complete thoug
                 },
                 voice: 'alloy',
                 temperature: 0.8,
-                max_output_tokens: 4096,
+                max_response_output_tokens: 4096,
                 tools: toolDefinitions,
                 tool_choice: 'auto',
             },
@@ -636,13 +634,19 @@ const setupSessionHandlers = () => {
         salespersonSession.transport.on('conversation.item.input_audio_transcription.completed', (event: any) => {
             console.log('Salesperson transcription completed:', event);
             if (event.transcript) {
-                const groupId = `salesperson-${Date.now()}`;
-                realtimeStore.addTranscriptGroup({
-                    id: groupId,
-                    role: 'salesperson',
-                    messages: [{ text: event.transcript, timestamp: Date.now() }],
-                    startTime: Date.now(),
-                });
+                // Try to append to last group if same speaker
+                const appended = realtimeStore.appendToLastTranscriptGroup('salesperson', event.transcript);
+                
+                if (!appended) {
+                    // Create new group if not appended
+                    const groupId = `salesperson-${Date.now()}`;
+                    realtimeStore.addTranscriptGroup({
+                        id: groupId,
+                        role: 'salesperson',
+                        messages: [{ text: event.transcript, timestamp: Date.now() }],
+                        startTime: Date.now(),
+                    });
+                }
                 
                 // Forward to coach for analysis
                 if (coachSession && coachSession.transport) {
@@ -666,13 +670,19 @@ const setupSessionHandlers = () => {
         coachSession.transport.on('conversation.item.input_audio_transcription.completed', (event: any) => {
             console.log('Customer transcription completed:', event);
             if (event.transcript) {
-                const groupId = `customer-${Date.now()}`;
-                realtimeStore.addTranscriptGroup({
-                    id: groupId,
-                    role: 'customer',
-                    messages: [{ text: event.transcript, timestamp: Date.now() }],
-                    startTime: Date.now(),
-                });
+                // Try to append to last group if same speaker
+                const appended = realtimeStore.appendToLastTranscriptGroup('customer', event.transcript);
+                
+                if (!appended) {
+                    // Create new group if not appended
+                    const groupId = `customer-${Date.now()}`;
+                    realtimeStore.addTranscriptGroup({
+                        id: groupId,
+                        role: 'customer',
+                        messages: [{ text: event.transcript, timestamp: Date.now() }],
+                        startTime: Date.now(),
+                    });
+                }
                 
                 // Update last customer message and context
                 realtimeStore.setLastCustomerMessage(event.transcript);
diff --git a/resources/js/stores/realtimeAgent.ts b/resources/js/stores/realtimeAgent.ts
@@ -110,6 +110,31 @@ export const useRealtimeAgentStore = defineStore('realtimeAgent', {
             this.transcriptGroups.push(group);
         },
         
+        appendToLastTranscriptGroup(role: string, text: string, maxTimeGapMs: number = 5000): boolean {
+            // Check if we have any transcript groups
+            if (this.transcriptGroups.length === 0) {
+                return false;
+            }
+            
+            // Get the last transcript group
+            const lastGroup = this.transcriptGroups[this.transcriptGroups.length - 1];
+            
+            // Check if it's the same speaker and within time window
+            if (lastGroup.role === role) {
+                const now = Date.now();
+                const lastMessageTime = lastGroup.messages[lastGroup.messages.length - 1]?.timestamp || lastGroup.startTime;
+                
+                if (now - lastMessageTime <= maxTimeGapMs) {
+                    // Append to existing group
+                    lastGroup.messages.push({ text, timestamp: now });
+                    lastGroup.endTime = now;
+                    return true;
+                }
+            }
+            
+            return false;
+        },
+        
         updateTranscriptGroup(groupId: string, updates: Partial<TranscriptGroup>) {
             const group = this.transcriptGroups.find(g => g.id === groupId);
             if (group) {

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import AppLogo from './AppLogo.vue';`
`10`	`10`	`const mainNavItems: NavItem[] = [`
`11`	`11`	`{`
`12`	`12`	`title: 'Realtime Agent',`
`13`		`- href: '/realtime-agent',`
	`13`	`+ href: '/realtime-agent-v2',`
`14`	`14`	`icon: Phone,`
`15`	`15`	`},`
`16`	`16`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<template>`
`2`	`2`	`<div`
`3`		`- class="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900"`
	`3`	`+ class="flex flex-col rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"`
`4`	`4`	`>`
`5`	`5`	`<h3 class="mb-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Commitments Made</h3>`
`6`	`6`