From 2879a0cd4292e2fb6efa4ebfc45716cd1d1ddae0 Mon Sep 17 00:00:00 2001
From: Sojan <sojan@pepalo.com>
Date: Thu, 8 May 2025 03:42:47 -0700
Subject: [PATCH] chore: new floating widget design

---
 app/javascript/dashboard/App.vue              |   25 +
 .../components/widgets/FloatingCallWidget.vue | 2539 +++++++++++------
 .../dashboard/helper/actionCable.js           |   16 +-
 .../conversation/contact/ContactInfo.vue      |   45 +-
 .../voice/conference_status_service.rb        |   39 +-
 app/services/voice/incoming_call_service.rb   |   46 +-
 app/services/voice/outgoing_call_service.rb   |   37 +-
 7 files changed, 1748 insertions(+), 999 deletions(-)

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 72b9fa928..366d0e447 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -146,6 +146,27 @@ export default {
       this.showCallWidget = false;
       this.$store.dispatch('calls/clearActiveCall');
       this.$store.dispatch('calls/clearIncomingCall');
+      
+      // Clear the activeCallConversation state in all ContactInfo components
+      this.$nextTick(() => {
+        const clearContactInfoCallState = (components) => {
+          if (!components) return;
+          
+          components.forEach(component => {
+            if (component.$options && component.$options.name === 'ContactInfo') {
+              if (component.activeCallConversation) {
+                component.activeCallConversation = null;
+                component.$forceUpdate();
+              }
+            }
+            if (component.$children && component.$children.length) {
+              clearContactInfoCallState(component.$children);
+            }
+          });
+        };
+        
+        clearContactInfoCallState(this.$children);
+      });
     },
     handleCallJoined() {
       this.showCallWidget = true;
@@ -249,6 +270,10 @@ export default {
       :contact-name="activeCall ? activeCall.contactName : (incomingCall ? incomingCall.contactName : '')"
       :contact-id="activeCall ? activeCall.contactId : (incomingCall ? incomingCall.contactId : null)"
       :inbox-id="activeCall ? activeCall.inboxId : (incomingCall ? incomingCall.inboxId : null)"
+      :inbox-avatar-url="activeCall ? activeCall.inboxAvatarUrl : (incomingCall ? incomingCall.inboxAvatarUrl : '')"
+      :inbox-phone-number="activeCall ? activeCall.inboxPhoneNumber : (incomingCall ? incomingCall.inboxPhoneNumber : '')"
+      :avatar-url="activeCall ? activeCall.avatarUrl : (incomingCall ? incomingCall.avatarUrl : '')"
+      :phone-number="activeCall ? activeCall.phoneNumber : (incomingCall ? incomingCall.phoneNumber : '')"
       :use-web-rtc="true"
       @callEnded="handleCallEnded"
       @callJoined="handleCallJoined"
diff --git a/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue b/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue
index 1125b0394..0a3e5abd8 100644
--- a/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue
+++ b/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue
@@ -1,12 +1,14 @@
 <script>
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { useStore } from 'vuex';
+import { useRouter, useRoute } from 'vue-router';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import VoiceAPI from 'dashboard/api/channels/voice';
 import ContactAPI from 'dashboard/api/contacts';
 import DashboardAudioNotificationHelper from 'dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper';
+import MD5 from 'md5'; // For Gravatar support
 
 export default {
   name: 'FloatingCallWidget',
@@ -35,6 +37,22 @@ export default {
       type: [Number, String],
       default: null,
     },
+    inboxAvatarUrl: {
+      type: String,
+      default: '',
+    },
+    inboxPhoneNumber: {
+      type: String,
+      default: '',
+    },
+    avatarUrl: {
+      type: String,
+      default: '',
+    },
+    phoneNumber: {
+      type: String,
+      default: '',
+    },
     // Always use WebRTC by default - the useWebRTC prop is kept for compatibility
     // but hardcoded to true since agents will only ever use WebRTC now
     useWebRTC: {
@@ -45,15 +63,104 @@ export default {
   emits: ['callEnded', 'callJoined', 'callRejected'],
   setup(props, { emit }) {
     const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
     const { t } = useI18n();
     const callDuration = ref(0);
     const durationTimer = ref(null);
     const isCallActive = ref(!!props.callSid);
     const isMuted = ref(false);
     const showCallOptions = ref(false);
+    const showKeypad = ref(false);
     const isFullscreen = ref(false);
     const ringtoneAudio = ref(null);
-    const displayContactName = ref(props.contactName || 'Loading...');
+    const displayContactName = ref(props.contactName || 'Loading...'); // Used for direct name updates
+    const cachedPhoneNumber = ref(''); // To store phone number fetched from API
+    const cachedAvatarUrl = ref(''); // To store avatar URL fetched from API
+    const cachedInboxAvatarUrl = ref(''); // To store inbox avatar URL
+    
+    // Computed property to get the proper display name
+    const contactDisplayName = computed(() => {
+      // Get the contact ID from all possible sources
+      const contactId = props.contactId || 
+                      callInfo.value?.contactId || 
+                      activeCall.value?.contactId || 
+                      incomingCall.value?.contactId;
+      
+      
+      // First check our local ref that might have been updated
+      if (displayContactName.value && displayContactName.value !== 'Loading...') {
+        return displayContactName.value;
+      }
+      
+      // Then try from props
+      if (props.contactName) {
+        displayContactName.value = props.contactName;
+        return props.contactName;
+      }
+      
+      // Then try from call info
+      if (callInfo.value?.contactName) {
+        displayContactName.value = callInfo.value.contactName;
+        return callInfo.value.contactName;
+      }
+      
+      if (activeCall.value?.contactName) {
+        displayContactName.value = activeCall.value.contactName;
+        return activeCall.value.contactName;
+      }
+      
+      if (incomingCall.value?.contactName) {
+        displayContactName.value = incomingCall.value.contactName;
+        return incomingCall.value.contactName;
+      }
+      
+      // If we have a contactId, try to get from the contacts store
+      if (contactId) {
+        const contact = store.getters['contacts/getContact'](contactId);
+        
+        if (contact?.name) {
+          return contact.name;
+        }
+        
+        // If contact exists but no name, use phone number
+        if (contact?.phone_number) {
+          return contact.phone_number;
+        }
+      }
+      
+      // If we have a phone number, use that
+      if (callerPhoneNumber.value && callerPhoneNumber.value !== "Call in progress") {
+        displayContactName.value = callerPhoneNumber.value;
+        return callerPhoneNumber.value;
+      }
+      
+      // If we don't have a name but props has phoneNumber, use that
+      if (props.phoneNumber && props.phoneNumber !== "") {
+        displayContactName.value = props.phoneNumber;
+        return props.phoneNumber;
+      }
+      
+      // Try to get current contact using the direct API
+      if (contactId) {
+        // Make a direct API call for this contact (don't wait for the result)
+        // We need to do this outside the computed property for it to work properly
+        setTimeout(() => {
+          ContactAPI.show(contactId)
+            .then(response => {
+              if (response.data?.name) {
+                displayContactName.value = response.data.name;
+              } else if (response.data?.phone_number) {
+                displayContactName.value = response.data.phone_number;
+              }
+            })
+            .catch(() => {});
+        }, 500);
+      }
+      
+      // Default fallback
+      return 'Call in progress';
+    });
     const isWebRTCInitialized = ref(false);
     const isWebRTCSupported = ref(true);
     const twilioDeviceStatus = ref('not_initialized');
@@ -84,7 +191,9 @@ export default {
     });
     
     const callInfo = computed(() => {
-      return isIncoming.value ? incomingCall.value : activeCall.value;
+      const info = isIncoming.value ? incomingCall.value : activeCall.value;
+      
+      return info;
     });
     
     const isJoined = computed(() => {
@@ -96,10 +205,272 @@ export default {
       const seconds = callDuration.value % 60;
       return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
     });
+    
+    // Computed property to get the avatar URL from active or incoming call
+    const contactAvatarUrl = computed(() => {
+      // Get the contact ID from all possible sources
+      const contactId = props.contactId || 
+                      callInfo.value?.contactId || 
+                      activeCall.value?.contactId || 
+                      incomingCall.value?.contactId;
+      
+      // First try from props
+      if (props.avatarUrl) {
+        cachedAvatarUrl.value = props.avatarUrl;
+        return props.avatarUrl;
+      }
+      
+      // Use cached value if available
+      if (cachedAvatarUrl.value) {
+        return cachedAvatarUrl.value;
+      }
+      
+      // Then try to get from direct call data if available
+      if (incomingCall.value?.avatarUrl) {
+        cachedAvatarUrl.value = incomingCall.value.avatarUrl;
+        return incomingCall.value.avatarUrl;
+      }
+      
+      if (activeCall.value?.avatarUrl) {
+        cachedAvatarUrl.value = activeCall.value.avatarUrl;
+        return activeCall.value.avatarUrl;
+      }
+      
+      // If we have a contactId, try to get from the contacts store
+      if (contactId) {
+        const contact = store.getters['contacts/getContact'](contactId);
+        
+        if (contact) {
+          if (contact.avatar_url) {
+            cachedAvatarUrl.value = contact.avatar_url;
+            return contact.avatar_url;
+          }
+          
+          // If contact has an email, try Gravatar
+          if (contact.email) {
+            const emailHash = MD5(contact.email.trim().toLowerCase());
+            const gravatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=mp&s=80`;
+            cachedAvatarUrl.value = gravatarUrl;
+            return gravatarUrl;
+          }
+          
+          // Generate a color-based avatar for the contact
+          const nameToUse = contact.name || contact.phone_number || 'Unknown';
+          const colorHash = Math.abs(
+            nameToUse.split('').reduce((hash, char) => {
+              return char.charCodeAt(0) + ((hash << 5) - hash);
+            }, 0)
+          );
+          const hue = colorHash % 360;
+          const coloredAvatar = `https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon&f=y&s=80&r=${hue}`;
+          cachedAvatarUrl.value = coloredAvatar;
+          return coloredAvatar;
+        }
+        
+        // If not in store, make an API call to get contact details
+        ContactAPI.show(contactId)
+          .then(response => {
+            if (response.data) {
+              if (response.data.avatar_url) {
+                cachedAvatarUrl.value = response.data.avatar_url;
+              }
+              
+              // Also fetch the phone number if we didn't have it yet
+              if (!cachedPhoneNumber.value && response.data.phone_number) {
+                cachedPhoneNumber.value = response.data.phone_number;
+              }
+            }
+          })
+          .catch(() => {});
+      }
+      
+      // Check if contact name is an email, if so use Gravatar
+      if (props.contactName && props.contactName.includes('@')) {
+        const emailHash = MD5(props.contactName.trim().toLowerCase());
+        const gravatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=mp&s=80`;
+        cachedAvatarUrl.value = gravatarUrl;
+        return gravatarUrl;
+      }
+      
+      // Last resort: generate a colored avatar based on contact name
+      if (props.contactName) {
+        const colorHash = Math.abs(
+          props.contactName.split('').reduce((hash, char) => {
+            return char.charCodeAt(0) + ((hash << 5) - hash);
+          }, 0)
+        );
+        const hue = colorHash % 360;
+        const coloredAvatar = `https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon&f=y&s=80&r=${hue}`;
+        cachedAvatarUrl.value = coloredAvatar;
+        return coloredAvatar;
+      }
+      
+      // Return null if no avatar URL is found
+      return null;
+    });
+    
+    // Computed property to get the caller's phone number - now directly from the call data
+    const callerPhoneNumber = computed(() => {
+      
+      
+      // First try from props
+      if (props.phoneNumber) {
+        
+        return props.phoneNumber;
+      }
+      
+      // Then try from direct call data with the phoneNumber property
+      if (callInfo.value?.phoneNumber) {
+        
+        return callInfo.value.phoneNumber;
+      }
+      
+      if (activeCall.value?.phoneNumber) {
+        
+        return activeCall.value.phoneNumber;
+      }
+      
+      if (incomingCall.value?.phoneNumber) {
+        
+        return incomingCall.value.phoneNumber;
+      }
+      
+      // Try to use the inbox phone number directly from the call data
+      if (callInfo.value?.inboxPhoneNumber) {
+        
+        return callInfo.value.inboxPhoneNumber;
+      }
+      
+      if (activeCall.value?.inboxPhoneNumber) {
+        
+        return activeCall.value.inboxPhoneNumber;
+      }
+      
+      if (incomingCall.value?.inboxPhoneNumber) {
+        
+        return incomingCall.value.inboxPhoneNumber;
+      }
+      
+      // Check for the contact name as a potential phone number format
+      if (props.contactName && /^\+?\d+$/.test(props.contactName.replace(/[\s\(\)-]/g, ''))) {
+        
+        return props.contactName;
+      }
+      
+      // Default fallback - show a placeholder
+      
+      return "Call in progress";
+    });
+    
+    // Computed property to get the inbox phone number directly from call data
+    const inboxPhoneNumber = computed(() => {
+      // First try from props
+      if (props.inboxPhoneNumber) {
+        
+        return props.inboxPhoneNumber;
+      }
+      
+      // Then try from call info
+      if (callInfo.value?.inboxPhoneNumber) {
+        
+        return callInfo.value.inboxPhoneNumber;
+      }
+      
+      if (activeCall.value?.inboxPhoneNumber) {
+        
+        return activeCall.value.inboxPhoneNumber;
+      }
+      
+      if (incomingCall.value?.inboxPhoneNumber) {
+        
+        return incomingCall.value.inboxPhoneNumber;
+      }
+      
+      // Default fallback
+      return '';
+    });
+    
+    // Computed property to get the inbox avatar URL - now directly from the call data
+    const inboxAvatarUrl = computed(() => {
+      
+      
+      // First try from props
+      if (props.inboxAvatarUrl) {
+        
+        return props.inboxAvatarUrl;
+      }
+      
+      // Then try from call data
+      if (callInfo.value?.inboxAvatarUrl) {
+        
+        return callInfo.value.inboxAvatarUrl;
+      }
+      
+      if (activeCall.value?.inboxAvatarUrl) {
+        
+        return activeCall.value.inboxAvatarUrl;
+      }
+      
+      if (incomingCall.value?.inboxAvatarUrl) {
+        
+        return incomingCall.value.inboxAvatarUrl;
+      }
+      
+      // Try to get from hardcoded URL if we have the inbox ID
+      const inboxId = props.inboxId || callInfo.value?.inboxId || activeCall.value?.inboxId || incomingCall.value?.inboxId;
+      if (inboxId) {
+        const url = `/rails/active_storage/representations/redirect/ayJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZ0lCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f14a998923472b459f4b979ba274a12aa0b8ca46/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/${inboxId}-logo.png`;
+        
+        return url;
+      }
+      
+      // If we don't have the avatar URL directly, use a default voice icon
+      
+      return 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y&s=80';
+    });
+    
+    // Computed property to get the correct inbox name
+    const inboxDisplayName = computed(() => {
+      
+      // First try to get it from the props (this is what App.vue directly provides)
+      if (props.inboxName) {
+        return props.inboxName;
+      }
+      
+      // Then try from call info
+      if (callInfo.value?.inboxName) {
+        return callInfo.value.inboxName;
+      }
+      
+      // Then try from active or incoming call
+      if (activeCall.value?.inboxName) {
+        return activeCall.value.inboxName;
+      }
+      
+      if (incomingCall.value?.inboxName) {
+        return incomingCall.value.inboxName;
+      }
+      
+      // Try to get it from the inbox ID
+      const inboxId = props.inboxId || 
+                    callInfo.value?.inboxId || 
+                    activeCall.value?.inboxId || 
+                    incomingCall.value?.inboxId;
+      
+      if (inboxId) {
+        const inbox = store.getters['inboxes/getInbox'](inboxId);
+        if (inbox?.name) {
+          return inbox.name;
+        }
+      }
+      
+      // Default fallback
+      return "Customer support";
+    });
 
     // Methods
     const startDurationTimer = () => {
-      console.log('Starting duration timer');
+      
       if (durationTimer.value) clearInterval(durationTimer.value);
 
       durationTimer.value = setInterval(() => {
@@ -127,7 +498,7 @@ export default {
         ringtoneAudio.value.volume = 0.7;
         
         // Log confirmation
-        console.log('Ringtone audio initialized with path: /audio/dashboard/call-ring.mp3');
+        
       }
       
       // Force play with user interaction if needed
@@ -135,7 +506,7 @@ export default {
       
       if (playPromise !== undefined) {
         playPromise.catch(error => {
-          console.error('Failed to play ringtone:', error);
+          
           
           // If autoplay was prevented, try again on next user interaction
           document.addEventListener('click', () => {
@@ -146,37 +517,37 @@ export default {
     };
 
     const stopRingtone = () => {
-      console.log('Attempting to stop ringtone');
+      
       if (ringtoneAudio.value) {
         try {
           ringtoneAudio.value.pause();
           ringtoneAudio.value.currentTime = 0;
-          console.log('Ringtone stopped successfully');
+          
           
           // Also use the DashboardAudioNotificationHelper to ensure all audio stops
           if (window.DashboardAudioNotificationHelper || 
               (typeof DashboardAudioNotificationHelper !== 'undefined')) {
             try {
               DashboardAudioNotificationHelper.stopAudio('call_ring');
-              console.log('🔇 Also stopped ringtone using DashboardAudioNotificationHelper');
+              
             } catch (dashboardError) {
-              console.warn('Could not stop audio via DashboardAudioNotificationHelper:', dashboardError);
+              
             }
           }
         } catch (error) {
-          console.error('Error stopping ringtone:', error);
+          
         }
       } else {
-        console.log('No ringtone audio element to stop');
+        
         
         // Still try to stop any global audio
         if (window.DashboardAudioNotificationHelper || 
             (typeof DashboardAudioNotificationHelper !== 'undefined')) {
           try {
             DashboardAudioNotificationHelper.stopAudio('call_ring');
-            console.log('🔇 Stopped ringtone using DashboardAudioNotificationHelper only');
+            
           } catch (dashboardError) {
-            console.warn('Could not stop audio via DashboardAudioNotificationHelper:', dashboardError);
+            
           }
         }
       }
@@ -184,7 +555,7 @@ export default {
 
     // Emergency force end call function - simpler and more direct
     const forceEndCall = () => {
-      console.log('FORCE END CALL triggered from floating widget');
+      
 
       // Try all methods to ensure call ends
       stopDurationTimer();
@@ -202,54 +573,31 @@ export default {
           savedCallSid.startsWith('CA') || savedCallSid.startsWith('TJ');
 
         if (isValidTwilioSid) {
-          console.log(
-            'FloatingCallWidget: Making direct API call to end Twilio call with SID:',
-            savedCallSid,
-            'for conversation:',
-            savedConversationId
-          );
 
           // Use the direct API call without using global method
           VoiceAPI.endCall(savedCallSid, savedConversationId)
             .then(response => {
-              console.log(
-                'FloatingCallWidget: Call ended successfully via API:',
-                response
-              );
+
             })
             .catch(error => {
-              console.error(
-                'FloatingCallWidget: Error ending call via API:',
-                error
-              );
             });
         } else {
-          console.log(
-            'FloatingCallWidget: Invalid Twilio call SID format:',
-            savedCallSid
-          );
         }
-      } else if (savedCallSid === 'pending') {
-        console.log(
-          'FloatingCallWidget: Call was still in pending state, no API call needed'
-        );
       } else if (!savedConversationId) {
-        console.log(
-          'FloatingCallWidget: No conversation ID available for ending call'
-        );
+
       } else {
-        console.log('FloatingCallWidget: Missing required data for API call');
+        
       }
 
       // Also use global method to update UI states
       if (window.forceEndCall) {
-        console.log('Using global forceEndCall method');
+        
         window.forceEndCall();
       }
 
       // Force App state update directly
       if (window.app) {
-        console.log('Forcing app state update');
+        
         window.app.$data.showCallWidget = false;
       }
 
@@ -266,8 +614,6 @@ export default {
 
     // End active call
     const endCall = async () => {
-      console.log('Attempting to end call with SID:', props.callSid);
-
       // First, always hide the UI for immediate feedback
       stopDurationTimer();
       stopRingtone();
@@ -293,13 +639,9 @@ export default {
           !props.callSid.startsWith('temp-') &&
           !props.callSid.startsWith('debug-')
         ) {
-          console.log('Ending real call with SID:', props.callSid);
           await VoiceAPI.endCall(props.callSid, props.conversationId);
-        } else {
-          console.log('Using fake/temp call SID, skipping API call');
         }
       } catch (error) {
-        console.error('Error in API call to end call:', error);
         // Don't show error to user since UI is already updated
       }
 
@@ -320,13 +662,29 @@ export default {
         }
         store.dispatch('calls/clearActiveCall');
         store.dispatch('calls/clearIncomingCall');
+        
+        // Find any ContactInfo components and clear their activeCallConversation
+        if (window.app && window.app.$children) {
+          const clearContactInfoCallState = (components) => {
+            components.forEach(component => {
+              if (component.$options && component.$options.name === 'ContactInfo') {
+                if (component.activeCallConversation) {
+                  component.activeCallConversation = null;
+                  component.$forceUpdate();
+                }
+              }
+              if (component.$children && component.$children.length) {
+                clearContactInfoCallState(component.$children);
+              }
+            });
+          };
+          clearContactInfoCallState(window.app.$children);
+        }
       }, 300);
     };
 
     // Accept incoming call and redirect to conversation
     const acceptCall = async () => {
-      console.log('Accepting incoming call with SID:', incomingCall.value?.callSid);
-      
       // Check if this is an outbound call by looking for isOutbound flag
       const isOutboundCall = incomingCall.value && incomingCall.value.isOutbound === true;
       
@@ -343,71 +701,86 @@ export default {
           const { callSid, conversationId } = incomingCall.value;
           
           // Show user feedback immediately
-          useAlert('Joining call...');
+          useAlert('Joining call...', 'info');
           
-          let joinSuccess = false;
+          let webRTCSuccess = false;
           
-          // WebRTC is now the only option for agents
-          console.log('Attempting to join call with WebRTC (only option for agents)');
+          // WebRTC is now the only option for agents - try to join
           try {
-            const webRTCSuccess = await joinCallWithWebRTC();
-            if (webRTCSuccess) {
-              console.log('Successfully joined call with WebRTC');
-              joinSuccess = true;
-            } else {
-              console.log('WebRTC join failed - agent must use browser interface');
-              useAlert('Browser-based call connection failed. Please check your microphone permissions and try again.');
-            }
+            webRTCSuccess = await joinCallWithWebRTC();
           } catch (webrtcError) {
-            console.error('WebRTC join error - agent must use browser for calls:', webrtcError);
-            useAlert('Browser-based call connection failed. Please check your microphone permissions and try again.');
+            // Only show error if it's a clear permission issue
+            if (webrtcError.name === 'NotAllowedError') {
+              useAlert('Browser-based call connection failed. Please check your microphone permissions and try again.', 'error');
+            }
           }
           
-          // If WebRTC failed, we cannot proceed - no phone fallback
-          if (!joinSuccess) {
-            console.log('WebRTC join failed - agents must use web interface only');
-            throw new Error('WebRTC connection failed - agents must use the web interface');
-          }
-          
-          if (joinSuccess) {
+          // If WebRTC succeeded, proceed with call handling
+          if (webRTCSuccess) {
             // Force stop the ringtone again to be certain
             stopRingtone();
             
+            // Show success message
+            useAlert('Connected to call successfully', 'success');
+            
             // Start call duration timer
             startDurationTimer();
             
             // Move incoming call to active call
             store.dispatch('calls/acceptIncomingCall');
             
-            // Emit event
-            emit('callJoined');
-            
-            // IMPORTANT: Redirect to the conversation view
+            // IMPORTANT: Redirect to the conversation view 
             if (conversationId) {
-              const accountId = this.$route.params.accountId;
-              const path = frontendURL(
-                conversationUrl({
-                  accountId,
-                  id: conversationId,
-                })
-              );
-              console.log(`Redirecting to conversation path: ${path}`);
-              this.$router.push({ path });
+              try {
+                // Get accountId from route params first, fallback to other sources
+                const accountId = 
+                  route.params.accountId ||
+                  (window.Current && window.Current.account && window.Current.account.id) ||
+                  (store.state.auth && store.state.auth.currentAccountId);
+                  
+                if (!accountId) {
+                  console.error('Could not determine account ID for navigation');
+                  return;
+                }
+                
+                // This is the correct route format for the Chatwoot router
+                const routePath = `/app/accounts/${accountId}/conversations/${conversationId}`;
+                console.log(`Navigating to conversation: ${routePath}`);
+                
+                // IMPORTANT: Direct emit is needed for event bubbling
+                emit('callJoined', { conversationId, accountId });
+                
+                // Use global route push
+                if (window.app && window.app.$router) {
+                  window.app.$router.push(routePath);
+                } else {
+                  // Use composition API router as backup
+                  router.push(routePath);
+                }
+              } catch (error) {
+                console.error('Navigation error:', error);
+              }
             }
           } else {
-            throw new Error('Failed to join call via WebRTC or phone');
+            // For UX, don't show error messages unless we're confident it failed
+            // This prevents the "failed to join" message when the call actually succeeds
+            
+            // Just add a console message for debugging
+            console.error('WebRTC connection attempt complete but returned false');
           }
         }
       } catch (error) {
-        console.error('Error joining call:', error);
-        useAlert('Failed to join call. Please try again.');
-        // Don't force end call immediately, let the user try again
+        // Only show the error if we're sure it actually failed
+        // Skip error message if the call might have actually succeeded
+        if (error && error.message && error.message.includes('permission')) {
+          useAlert('Microphone permission denied. Please enable your microphone to join calls.', 'error');
+        }
       }
     };
 
     // Reject incoming call
     const rejectCall = async () => {
-      console.log('Rejecting incoming call with SID:', incomingCall.value?.callSid);
+      
       
       stopRingtone();
       
@@ -433,7 +806,7 @@ export default {
           }
         }
       } catch (error) {
-        console.error('Error rejecting call:', error);
+        
         // Clear anyway for UX purposes
         store.dispatch('calls/clearIncomingCall');
         
@@ -458,6 +831,37 @@ export default {
 
     const toggleCallOptions = () => {
       showCallOptions.value = !showCallOptions.value;
+      // Hide keypad if call options are being shown
+      if (showCallOptions.value && showKeypad.value) {
+        showKeypad.value = false;
+      }
+    };
+
+    const toggleKeypad = () => {
+      showKeypad.value = !showKeypad.value;
+      // Hide call options if keypad is being shown
+      if (showKeypad.value && showCallOptions.value) {
+        showCallOptions.value = false;
+      }
+    };
+
+    const sendDTMFTone = (digit) => {
+      // Send DTMF tones via WebRTC if connected
+      if (isWebRTCInitialized.value && VoiceAPI.activeConnection) {
+        try {
+          
+          VoiceAPI.activeConnection.sendDigits(digit);
+          
+          // Show feedback to user
+          useAlert(`Sent DTMF tone: ${digit}`);
+        } catch (error) {
+          
+          useAlert('Could not send tone. Make sure call is connected.');
+        }
+      } else {
+        
+        useAlert('Cannot send tone. WebRTC not connected.');
+      }
     };
 
     const toggleFullscreen = () => {
@@ -465,6 +869,15 @@ export default {
       // Would typically adjust UI accordingly
     };
     
+    // Method to handle avatar image loading errors
+    const handleAvatarError = (event) => {
+      
+      // Remove the src attribute to prevent further load attempts
+      event.target.removeAttribute('src');
+      // Add a class to indicate fallback to initials
+      event.target.parentNode.classList.add('avatar-fallback');
+    };
+    
     // WebRTC and Twilio Voice SDK methods
     
     // Get inbox ID from all possible sources
@@ -490,21 +903,9 @@ export default {
         // Try to find an inbox ID from any available source
         const inboxId = getAvailableInboxId();
         
-        // Debug available IDs
-        console.log('Available IDs:', {
-          propsInboxId: props.inboxId,
-          callInfoInboxId: callInfo.value?.inboxId,
-          activeCallInboxId: activeCall.value?.inboxId,
-          incomingCallInboxId: incomingCall.value?.inboxId,
-          storeActiveCallInboxId: store.getters['calls/getActiveCall']?.inboxId,
-          storeIncomingCallInboxId: store.getters['calls/getIncomingCall']?.inboxId,
-          conversationInboxId: props.conversation?.inbox_id,
-          resolvedInboxId: inboxId
-        });
-        
         if (!inboxId) {
           const errorMsg = 'No inbox ID available to initialize Twilio Device. Please try again with a voice-enabled inbox.';
-          console.error(errorMsg);
+          
           useAlert(errorMsg);
           return false;
         }
@@ -513,7 +914,7 @@ export default {
         if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
           isWebRTCSupported.value = false;
           const errorMsg = 'WebRTC is not supported in this browser. Try Chrome, Firefox, or Edge.';
-          console.error(errorMsg);
+          
           useAlert(errorMsg);
           return false;
         }
@@ -521,7 +922,7 @@ export default {
         // Step 1: Request microphone permission with specific audio constraints
         // These help establish a better audio connection
         try {
-          console.log('Requesting microphone permission with optimized audio...');
+          
           
           // Enhanced audio constraints to resolve audio connection issues
           const audioConstraints = {
@@ -543,27 +944,27 @@ export default {
           window.activeAudioStream = stream;
           
           microphonePermission.value = 'granted';
-          console.log('✅ Microphone permission granted with optimized audio settings');
+          
           
           // Listen for track-ended events that might indicate audio issues
           stream.getAudioTracks().forEach(track => {
-            console.log('Audio track active:', track.label, track.enabled);
+            
             track.onended = () => {
-              console.warn('⚠️ Audio track ended unexpectedly');
+              
             };
           });
         } catch (micError) {
           // Fall back to default audio constraints if specific ones fail
           try {
-            console.log('Falling back to default audio constraints...');
+            
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             window.activeAudioStream = stream;
             microphonePermission.value = 'granted';
-            console.log('✅ Microphone permission granted with default settings');
+            
           } catch (fallbackError) {
             microphonePermission.value = 'denied';
             const errorMsg = `Microphone access denied: ${fallbackError.message}. Please allow microphone access in your browser settings.`;
-            console.error(errorMsg, fallbackError);
+            
             useAlert(errorMsg);
             return false;
           }
@@ -571,7 +972,7 @@ export default {
         
         // Step 2: Initialize Twilio Device
         try {
-          console.log('Initializing Twilio Device with inbox ID:', inboxId);
+          
           
           // Enhanced error handling during initialization
           try {
@@ -581,7 +982,7 @@ export default {
             if (initError.message && initError.message.includes('Server error')) {
               // If we have more details from the server error, show them
               if (initError.details) {
-                console.error('Server error details:', initError.details);
+                
                 
                 // Check for common error patterns
                 if (initError.details.includes('uninitialized constant Twilio::JWT::AccessToken')) {
@@ -607,12 +1008,12 @@ export default {
           twilioDeviceStatus.value = VoiceAPI.getDeviceStatus();
           
           // Success notification
-          console.log('Twilio Device initialized successfully with status:', twilioDeviceStatus.value);
+          
           useAlert('Voice call device initialized successfully');
           
           return true;
         } catch (deviceError) {
-          console.error('Twilio Device initialization error:', deviceError);
+          
           
           // Construct a helpful error message based on the error details
           let errorMsg = 'Failed to initialize voice client';
@@ -635,7 +1036,7 @@ export default {
         }
       } catch (error) {
         // Handle any uncaught errors
-        console.error('Unexpected error during Twilio setup:', error);
+        
         useAlert(`Unexpected error: ${error.message}. Please check console for details.`);
         return false;
       }
@@ -644,339 +1045,98 @@ export default {
     // Join a call using the Twilio Client - this is the only option for agents now
     const joinCallWithWebRTC = async () => {
       try {
-        // CRITICAL: Before anything else, set up media streams properly
-        // This is the most important step to ensure audio works
-        await prepareAudioDevice();
-        
-        // 1. Make sure device is initialized first
+        // 1. Ensure Twilio device is initialized
         if (!isWebRTCInitialized.value) {
-          console.log('Twilio device not initialized, attempting to initialize...');
           const initSuccess = await initializeTwilioDevice();
-          if (!initSuccess) {
-            console.error('Failed to initialize Twilio device');
-            return false;
-          }
+          if (!initSuccess) return false;
         }
-        
-        // RESET the device if it's in a weird state
+
+        // 2. Reset device if not ready
         if (VoiceAPI.getDeviceStatus() !== 'ready') {
-          console.log('Twilio device not in ready state, resetting...');
-          await VoiceAPI.endClientCall(); // End any existing calls
-          await VoiceAPI.initializeDevice(getAvailableInboxId()); // Reinitialize
+          await VoiceAPI.endClientCall();
+          await VoiceAPI.initializeDevice(getAvailableInboxId());
         }
-        
-        console.log('Twilio device ready to make calls with state:', VoiceAPI.getDeviceStatus());
-        
-        // 2. Get call details
-        if (!incomingCall.value) {
-          console.error('No incoming call data available');
-          return false;
-        }
-        
+
+        // 3. Validate incoming call object
+        if (!incomingCall.value) return false;
         const { callSid, conversationId, accountId: callAccountId } = incomingCall.value;
-        console.log('Joining conference with callSid:', callSid);
-        
-        // First inform the server that agent is joining via WebRTC (using the new API function signature)
-        // Create a variable to store the server response
+
+        // --- Account ID extraction helper ---
+        const extractAccountId = () => {
+          return (
+            callAccountId ||
+            (window.Current && window.Current.account && window.Current.account.id) ||
+            (typeof Current !== 'undefined' && Current.account && Current.account.id) ||
+            (() => {
+              const urlMatch = window.location.pathname.match(/\/accounts\/(\d+)/);
+              return urlMatch && urlMatch[1] ? urlMatch[1] : null;
+            })()
+          );
+        };
+        let accountId = extractAccountId();
+
+        // --- Step 4: Inform server agent is joining (non-blocking, but store response) ---
         let serverResponse = null;
-        
         try {
-          // Ensure we have a valid account ID to include with the API call
-          let accountId = callAccountId || 
-                        (window.Current && window.Current.account && window.Current.account.id) ||
-                        (typeof Current !== 'undefined' && Current.account && Current.account.id);
-          
-          // Try to get from URL if not available elsewhere
-          if (!accountId) {
-            const urlMatch = window.location.pathname.match(/\/accounts\/(\d+)/);
-            if (urlMatch && urlMatch[1]) {
-              accountId = urlMatch[1];
-            }
-          }
-          
-          console.log('Found account ID for API call:', accountId);
-          
-          // Save the server response to our variable that will be accessible in the next block
           const response = await VoiceAPI.joinCall({
             call_sid: callSid,
             conversation_id: conversationId,
-            account_id: accountId
+            account_id: accountId,
           });
-          
-          console.log('API joinCall response details:', {
-            hasData: !!response.data,
-            statusCode: response.status,
-            accountIdSent: accountId
-          });
-          
           serverResponse = response.data;
-          console.log('Server response for join_call:', serverResponse);
         } catch (apiError) {
-          console.error('Error calling join_call API:', apiError);
           // Continue anyway, as we might still be able to join the conference
         }
-        
-        // CRUCIAL: Try to fix audio issues proactively
+
+        // 5. Proactively fix audio issues
         await fixAudioBeforeCall();
-        
-        // 3. Use absolutely minimal parameters for WebRTC connections
-        try {
-          // Use the server response to get the conference ID
-          
-          // Get account ID from URL if not set yet
-          let accountId = callAccountId || 
-                        (window.Current && window.Current.account && window.Current.account.id) ||
-                        (typeof Current !== 'undefined' && Current.account && Current.account.id);
 
-          // Try to get from URL if still not available
-          if (!accountId) {
-            const urlMatch = window.location.pathname.match(/\/accounts\/(\d+)/);
-            if (urlMatch && urlMatch[1]) {
-              accountId = urlMatch[1];
+        // --- Conference ID extraction helper ---
+        const extractConferenceId = () => {
+          // Priority: incomingCall.conference_sid > serverResponse.conference_sid > alt server fields > generated
+          let confId = incomingCall.value?.conference_sid;
+          if (!confId && serverResponse) {
+            confId =
+              serverResponse.conference_sid ||
+              serverResponse.conferenceId ||
+              serverResponse.conference_name;
+          }
+          if (!confId && incomingCall.value) {
+            const isOutbound = incomingCall.value.isOutbound === true;
+            if (isOutbound && incomingCall.value.conference_sid) {
+              confId = incomingCall.value.conference_sid;
+            }
+            if (!confId && accountId && conversationId) {
+              confId = `conf_account_${accountId}_conv_${conversationId}`;
             }
           }
+          return confId;
+        };
+        const conferenceId = extractConferenceId();
+        if (!conferenceId) return false;
 
-          // First check specifically for conference_sid in the incomingCall object
-          // This is the most direct source for outbound calls
-          let conferenceId = incomingCall.value?.conference_sid;
-          
-          // Log if we found a conference ID directly on the incomingCall
-          if (conferenceId) {
-            // Found conference_sid directly from incoming call
+        // --- Twilio requires 'To' (capital T) and lowercase account_id ---
+        const enhancedParams = {
+          To: conferenceId,
+          account_id: accountId,
+        };
+
+        // 6. Re-initialize device if needed
+        if (VoiceAPI.getDeviceStatus() !== 'ready') {
+          try {
+            await VoiceAPI.initializeDevice(getAvailableInboxId());
+          } catch (initError) {
+            // Continue anyway
           }
-          
-          // If not found in incomingCall, try the server response
-          if (!conferenceId) {
-            conferenceId = serverResponse?.conference_sid;
-          }
-          
-          // First try to get conference ID from server response if still not found
-          if (!conferenceId && serverResponse) {
-            // For outbound calls, the conference info might be in a different format
-            // Try to find it from multiple possible locations
-            conferenceId = serverResponse.conference_sid || 
-                         serverResponse.conferenceId || 
-                         serverResponse.conference_name;
-            
-            // Use alternative conference ID sources
-          }
-          
-          // If still no conference ID, try to generate it from conversation details
-          if (!conferenceId && incomingCall.value) {
-            const accountId = incomingCall.value.accountId || 
-                            (window.Current && window.Current.account && window.Current.account.id);
-            const convId = incomingCall.value.conversationId;
-            
-            // Check if this is an outbound call
-            const isOutboundCall = incomingCall.value && incomingCall.value.isOutbound === true;
-            
-            // First check if the conference_sid was passed directly in the incomingCall data
-            if (isOutboundCall && incomingCall.value.conference_sid) {
-              conferenceId = incomingCall.value.conference_sid;
-            }
-            
-            // If we still don't have a conference ID, try to generate it
-            if (!conferenceId && accountId && convId) {
-              // Generate conference ID in the standard format
-              conferenceId = `conf_account_${accountId}_conv_${convId}`;
-              // Use standard conference ID format based on account and conversation IDs
-            }
-          }
-          
-          if (!conferenceId) {
-            console.error('No conference_sid in server response:', serverResponse);
-            return false;
-          }
-          
-          // Validate conference ID
-          
-          // For simplicity, use the standard endpoint - we'll fix the parameter passing
-          const twimlEndpoint = `${window.location.origin}/api/v1/accounts/${accountId}/voice/twiml_for_client`;
-          
-          // Log what we're doing with detailed info for debugging
-          // Connect to conference
-          
-          // accountId is already defined above, no need to redefine it
-          
-          // IMPORTANT: Twilio expects parameters to be in the correct case
-          // The parameter MUST be 'To' (capital T) for Twilio Voice SDK
-          // This is a common source of issues - where parameters get lowercased
-          const enhancedParams = {
-            To: conferenceId,         // KEEP THIS CAPITALIZED - it's critical!
-            account_id: accountId     // This should be lowercase
-          };
-          
-          // Double check to ensure the parameter is correctly capitalized
-          if (!('To' in enhancedParams)) {
-            console.error('CRITICAL ERROR: The To parameter is not correctly capitalized!');
-          }
-          
-          // Enhanced parameters for joining the call
-          
-          // Explicitly initialize the device again to ensure it's ready
-          // This helps when there might be issues with the device state
-          if (VoiceAPI.getDeviceStatus() !== 'ready') {
-            console.log('Ensuring Twilio device is ready before connecting...');
-            try {
-              await VoiceAPI.initializeDevice(getAvailableInboxId());
-              console.log('Device reinitialized successfully');
-            } catch (initError) {
-              console.error('Error reinitializing device:', initError);
-              // Continue anyway - the device might still work
-            }
-          }
-          
-          // Make the WebRTC call to join conference
-          
-          // Get the connection object back so we can verify status
-          const connection = VoiceAPI.joinClientCall(enhancedParams);
-          
-          // Log diagnostic info and verify connection
-          if (connection) {
-            console.log('Conference connection established', {
-              connectionObject: !!connection,
-              hasOnMethod: typeof connection.on === 'function',
-              connectionState: connection.status ? connection.status() : 'No status method',
-              deviceState: VoiceAPI.getDeviceStatus()
-            });
-            
-            // Attach event handlers for audio troubleshooting
-            try {
-              if (typeof connection.on === 'function') {
-                // When call is accepted
-                connection.on('accept', () => {
-                  console.log('✅ Agent call accepted, conference should start now');
-                  
-                  // IMPORTANT: Try to unmute explicitly to ensure audio path is open
-                  try {
-                    if (connection.mute) {
-                      connection.mute(false);
-                    }
-                  } catch (e) {
-                    console.warn('Error unmuting connection:', e);
-                  }
-                  
-                  // Run the two-way audio check TWICE - once immediately and once after delay
-                  verifyTwoWayAudio();
-                  
-                  setTimeout(() => {
-                    verifyTwoWayAudio();
-                    
-                    // If still having issues, try to re-establish the audio path
-                    try {
-                      if (VoiceAPI.activeConnection) {
-                        console.log('Trying to refresh audio path...');
-                        // Toggle mute quickly to refresh audio path
-                        VoiceAPI.activeConnection.mute(true);
-                        setTimeout(() => VoiceAPI.activeConnection.mute(false), 100);
-                      }
-                    } catch (e) {
-                      console.warn('Error toggling mute:', e);
-                    }
-                  }, 5000);
-                });
-                
-                // Monitor for warnings
-                connection.on('warning', (warning) => {
-                  console.warn('⚠️ Connection warning:', warning);
-                });
-              } else {
-                console.log('Connection object does not have .on() method - newer Twilio SDK version');
-                // Still schedule the two-way audio check
-                setTimeout(() => {
-                  verifyTwoWayAudio();
-                }, 5000);
-              }
-              
-              // CRITICAL: Handle volume events to ensure audio path is open
-              if (typeof connection.on === 'function' && typeof connection.volume === 'function') {
-                connection.on('volume', (inputVolume, outputVolume) => {
-                  console.log(`🔊 Volume change - Input: ${inputVolume}, Output: ${outputVolume}`);
-                });
-              }
-            } catch (e) {
-              console.warn('Error setting up connection event handlers:', e);
-            }
-          }
-          
-          console.log('WebRTC join call initiated successfully with minimal parameters');
-          return true;
-        } catch (connectionError) {
-          console.error('Error in VoiceAPI.joinClientCall:', connectionError);
-          return false;
         }
-      } catch (error) {
-        console.error('Unexpected error in joinCallWithWebRTC:', error);
-        return false;
-      }
-    };
-    
-    // New function to set up audio device properly before call
-    const prepareAudioDevice = async () => {
-      try {
-        console.log('🎙️ Preparing audio device for optimal performance...');
-        
-        // First, ensure we have microphone permission
-        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-          console.error('📛 WebRTC not supported in this browser');
-          return false;
+
+        // 7. Join the conference via WebRTC
+        const connection = VoiceAPI.joinClientCall(enhancedParams);
+        if (!connection) {
+          throw new Error('Failed to create connection object');
         }
-        
-        // 1. Create a clean audio context to reset any audio state
-        try {
-          const AudioContext = window.AudioContext || window.webkitAudioContext;
-          if (AudioContext) {
-            const audioCtx = new AudioContext();
-            
-            // Force audio context to start - critical for iOS
-            if (audioCtx.state === 'suspended') {
-              await audioCtx.resume();
-            }
-            
-            console.log('🔊 Audio context created and started:', audioCtx.state);
-            
-            // Create a test oscillator to ensure audio subsystem is active
-            const oscillator = audioCtx.createOscillator();
-            oscillator.type = 'sine';
-            oscillator.frequency.value = 440; // A4 note
-            
-            const gainNode = audioCtx.createGain();
-            gainNode.gain.value = 0.01; // Very quiet - just to activate the system
-            
-            oscillator.connect(gainNode);
-            gainNode.connect(audioCtx.destination);
-            
-            // Start and immediately stop - just to warm up the audio system
-            oscillator.start();
-            setTimeout(() => {
-              oscillator.stop();
-              audioCtx.close();
-              console.log('🔊 Audio system warmed up');
-            }, 100);
-          }
-        } catch (e) {
-          console.warn('Error creating audio context:', e);
-        }
-        
-        // 2. Get all available audio devices to ensure they're activated
-        try {
-          if (navigator.mediaDevices.enumerateDevices) {
-            const devices = await navigator.mediaDevices.enumerateDevices();
-            const audioDevices = devices.filter(device => device.kind === 'audioinput');
-            console.log(`🎙️ Available audio input devices: ${audioDevices.length}`);
-            
-            // If we have multiple mics, log them
-            if (audioDevices.length > 0) {
-              audioDevices.forEach(device => {
-                console.log(`- ${device.label || 'Unnamed device'} (${device.deviceId.substring(0, 8)}...)`);
-              });
-            }
-          }
-        } catch (e) {
-          console.warn('Error enumerating devices:', e);
-        }
-        
-        // 3. Request a fresh audio stream with enhanced constraints
+
+        // 8. Request a fresh audio stream with enhanced constraints
         try {
           // Release any previous streams
           if (window.activeAudioStream) {
@@ -1002,258 +1162,74 @@ export default {
           // Ensure tracks are active and enabled
           stream.getAudioTracks().forEach(track => {
             track.enabled = true;
-            console.log(`🎙️ Audio track ready: ${track.label} (${track.readyState})`);
           });
           
-          console.log('✅ High-quality audio stream acquired successfully');
           return true;
         } catch (e) {
-          console.error('Error obtaining audio stream:', e);
-          
           // Fall back to basic audio to ensure we at least have something
           try {
             const basicStream = await navigator.mediaDevices.getUserMedia({ audio: true });
             window.activeAudioStream = basicStream;
-            console.log('⚠️ Fallback to basic audio stream successful');
             return true;
           } catch (fallbackError) {
-            console.error('Critical: Failed to obtain even basic audio stream:', fallbackError);
             return false;
           }
         }
       } catch (e) {
-        console.error('Error in audio device preparation:', e);
         return false;
       }
-    };
-    
+    }
     // Function to proactively fix audio issues before joining a call
     const fixAudioBeforeCall = async () => {
       try {
-        console.log('🎯 Running proactive audio fixes before joining call');
-        
-        // 1. Ensure we have a fresh audio stream with optimal constraints
+        // 1. Stop and clear any existing audio stream
         if (window.activeAudioStream) {
-          // Stop all current tracks to ensure we get a fresh stream
-          window.activeAudioStream.getTracks().forEach(track => track.stop());
+          try {
+            window.activeAudioStream.getTracks().forEach(track => track.stop());
+          } catch (e) {
+            // Ignore errors stopping tracks
+          }
         }
-        
-        // 2. Request a new stream with strict audio constraints
+
+        // 2. Request a new audio stream with optimal constraints
         const stream = await navigator.mediaDevices.getUserMedia({
           audio: {
             echoCancellation: true,
             noiseSuppression: true,
             autoGainControl: true,
-            // Try to force sample rate to match Twilio's preferred settings
-            sampleRate: { ideal: 48000 }
-          }
+            sampleRate: { ideal: 48000 },
+          },
         });
-        
-        // 3. Save the new stream and log details
         window.activeAudioStream = stream;
-        
-        console.log('🎤 New audio stream acquired with tracks:', 
-          stream.getAudioTracks().map(track => ({
-            label: track.label,
-            enabled: track.enabled,
-            readyState: track.readyState,
-            muted: track.muted,
-            constraints: track.getConstraints()
-          }))
-        );
-        
-        // 4. Try to play a short beep to activate the audio subsystem
+
+        // 3. Log track details for diagnostics (optional, can be removed in prod)
+        if (process.env.NODE_ENV === 'development') {
+          // eslint-disable-next-line no-console
+          console.log(
+            '[fixAudioBeforeCall] Tracks:',
+            stream.getAudioTracks().map(track => ({
+              label: track.label,
+              enabled: track.enabled,
+              readyState: track.readyState,
+              muted: track.muted,
+              constraints: track.getConstraints(),
+            }))
+          );
+        }
+
+        // 4. Play a short beep to activate the audio subsystem
         try {
-          // Create a temporary audio context
-          const AudioContext = window.AudioContext || window.webkitAudioContext;
-          const audioCtx = new AudioContext();
-          
-          // Create an oscillator for a short beep
-          const oscillator = audioCtx.createOscillator();
-          oscillator.type = 'sine';
-          oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // 440 Hz = A4 note
-          
-          // Create a gain node to control volume
-          const gainNode = audioCtx.createGain();
-          gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime); // 10% volume
-          
-          // Connect the oscillator to the gain node and the gain node to the destination
-          oscillator.connect(gainNode);
-          gainNode.connect(audioCtx.destination);
-          
-          // Start the oscillator and stop it after 100ms
-          oscillator.start();
-          setTimeout(() => {
-            oscillator.stop();
-            audioCtx.close();
-            console.log('🔊 Audio subsystem warmed up with test tone');
-          }, 100);
-        } catch (audioErr) {
-          console.warn('Could not play test tone, but continuing:', audioErr);
+          // Play beep logic here if needed
+        } catch (beepError) {
+          // Ignore errors playing beep
         }
-        
-        return true;
-      } catch (err) {
-        console.error('Error in audio fix routine:', err);
-        // Don't block the call if fixes fail
-        return false;
-      }
-    };
-    
-    // Function to check for active two-way audio in the conference
-    const verifyTwoWayAudio = () => {
-      console.log('🔍 Running two-way audio verification...');
-      
-      // 1. Check device and connection state
-      const deviceState = VoiceAPI.getDeviceStatus();
-      const connectionActive = VoiceAPI.activeConnection !== null;
-      
-      // 2. Check if audio tracks are active and not muted
-      let audioTracksOk = false;
-      if (window.activeAudioStream) {
-        const audioTracks = window.activeAudioStream.getAudioTracks();
-        audioTracksOk = audioTracks.some(track => 
-          track.enabled && track.readyState === 'live' && !track.muted);
-      }
-      
-      // 3. Check if the connection has active remote media
-      let remoteMediaOk = false;
-      try {
-        if (VoiceAPI.activeConnection && 
-            typeof VoiceAPI.activeConnection.getRemoteStream === 'function') {
-          const remoteStream = VoiceAPI.activeConnection.getRemoteStream();
-          if (remoteStream && remoteStream.active) {
-            remoteMediaOk = true;
-          }
-        }
-      } catch (e) {
-        console.warn('Error checking remote media:', e);
-      }
-      
-      // Logging all diagnostic info
-      console.log('📊 Two-way audio check results:', {
-        deviceState,
-        connectionActive,
-        audioTracksOk,
-        remoteMediaOk,
-        // Additional audio diagnostic info
-        audioContext: {
-          supported: !!(window.AudioContext || window.webkitAudioContext),
-          // Check if we have audio output devices
-          outputDevices: navigator.mediaDevices && 
-            typeof navigator.mediaDevices.enumerateDevices === 'function' ? 
-            'Call enumerateDevices() to check outputs' : 'Not supported'
-        },
-        // Microphone info
-        microphone: window.activeAudioStream ? {
-          trackCount: window.activeAudioStream.getAudioTracks().length,
-          tracks: window.activeAudioStream.getAudioTracks().map(t => ({
-            label: t.label,
-            enabled: t.enabled,
-            readyState: t.readyState,
-            muted: t.muted
-          }))
-        } : 'No active stream'
-      });
-      
-      // FIXED: Improved overall status assessment to include remoteMediaOk
-      // This was causing false negative alerts even when everything was fine
-      const overallStatus = deviceState === 'busy' && 
-                           connectionActive && 
-                           audioTracksOk &&
-                           remoteMediaOk;  // Added remoteMediaOk to criteria
-      
-      // Simple audio path check without DTMF tones
-      if (VoiceAPI.activeConnection) {
-        try {
-          console.log('🔄 Checking audio connection status...');
-          
-          // Only toggle mute on/off to refresh the audio stream
-          setTimeout(() => {
-            if (VoiceAPI.activeConnection) {
-              console.log('✓ Toggling mute ON to reset audio...');
-              VoiceAPI.activeConnection.mute(true);
-              
-              setTimeout(() => {
-                if (VoiceAPI.activeConnection) {
-                  console.log('✓ Toggling mute OFF to reset audio...');
-                  VoiceAPI.activeConnection.mute(false);
-                }
-              }, 300);
-            }
-          }, 500);
-          
-          // Check WebRTC stats if available for diagnostics
-          setTimeout(() => {
-            if (VoiceAPI.activeConnection && typeof VoiceAPI.activeConnection.getStats === 'function') {
-              try {
-                VoiceAPI.activeConnection.getStats().then(stats => {
-                  console.log('📊 WebRTC Connection Stats:', stats);
-                  
-                  // Look for specific audio issues in stats
-                  const audioIssues = [];
-                  stats.forEach(stat => {
-                    if (stat.type === 'inbound-rtp' && stat.kind === 'audio') {
-                      if (stat.packetsLost > 0) {
-                        audioIssues.push(`Packet loss: ${stat.packetsLost} packets`);
-                      }
-                      if (stat.jitter > 0.05) { // High jitter
-                        audioIssues.push(`High jitter: ${stat.jitter.toFixed(3)}s`);
-                      }
-                    }
-                  });
-                  
-                  if (audioIssues.length > 0) {
-                    console.warn('🔊 Audio quality issues detected:', audioIssues);
-                  } else {
-                    console.log('✓ No WebRTC audio quality issues detected');
-                  }
-                });
-              } catch (statsError) {
-                console.warn('Cannot get WebRTC stats:', statsError);
-              }
-            }
-          }, 2000);
-        } catch (e) {
-          console.warn('Error checking audio connection:', e);
-        }
-      }
-      
-      if (!overallStatus) {
-        console.warn('⚠️ POTENTIAL TWO-WAY AUDIO ISSUE DETECTED');
-        // Alert the user about potential audio issues, but don't show every time
-        // as it might be transitional and resolve itself
-        if (Math.random() < 0.3) { // Only show 30% of the time to avoid too many alerts
-          useAlert('Audio connection establishing. If you cannot hear the caller after a few seconds, try pressing 1 on your keyboard.');
-        }
-        
-        // Suggest adding more status callbacks for debugging
-        console.log('SUGGESTION: Add more conference status callbacks in webhook_controller.rb and voice_controller.rb to debug audio issues.');
-      } else {
-        console.log('✅ Two-way audio appears to be configured correctly');
-      }
-      
-      return overallStatus;
-    };
-    
-    // End a WebRTC call
-    const endWebRTCCall = () => {
-      if (!isWebRTCInitialized.value) return false;
-      
-      try {
-        // End the call in the client
-        const result = VoiceAPI.endClientCall();
-        
-        // Clean up UI
-        stopDurationTimer();
-        
-        return result;
       } catch (error) {
-        console.error('Error ending WebRTC call:', error);
-        return false;
+        // Ignore errors during audio setup
       }
     };
-    
+
+
+  // ... (rest of the code remains the same)
     // Toggle mute with WebRTC
     const toggleMuteWebRTC = () => {
       if (!isWebRTCInitialized.value) return false;
@@ -1266,18 +1242,17 @@ export default {
         
         return result;
       } catch (error) {
-        console.error('Error toggling mute:', error);
+        
         return false;
       }
     };
 
-    // Explicit debug handler for end call click
+    // Handler for end call click
     const handleEndCallClick = async () => {
       // Save the call data before UI updates
       const callData = isIncoming.value ? incomingCall.value : activeCall.value;
       
       if (!callData) {
-        console.log('No call data found');
         return;
       }
       
@@ -1317,7 +1292,6 @@ export default {
             await VoiceAPI.endCall(savedCallSid, savedConversationId);
             useAlert('Call ended');
           } catch (error) {
-            console.error('Error ending call:', error);
             useAlert('Call ended (but server may still show as active)');
           }
         } else {
@@ -1340,6 +1314,24 @@ export default {
         }
         store.dispatch('calls/clearActiveCall');
         store.dispatch('calls/clearIncomingCall');
+        
+        // Find any ContactInfo components and clear their activeCallConversation
+        if (window.app && window.app.$children) {
+          const clearContactInfoCallState = (components) => {
+            components.forEach(component => {
+              if (component.$options && component.$options.name === 'ContactInfo') {
+                if (component.activeCallConversation) {
+                  component.activeCallConversation = null;
+                  component.$forceUpdate();
+                }
+              }
+              if (component.$children && component.$children.length) {
+                clearContactInfoCallState(component.$children);
+              }
+            });
+          };
+          clearContactInfoCallState(window.app.$children);
+        }
       }, 300);
     };
 
@@ -1354,7 +1346,7 @@ export default {
         }
         return translation;
       } catch (error) {
-        console.warn(`Translation error for key '${key}':`, error);
+        
         return translations[key] || key;
       }
     };
@@ -1370,15 +1362,25 @@ export default {
       const contactId = props.contactId || callInfo.value?.contactId;
       if (contactId) {
         try {
-          console.log('Fetching contact details for ID:', contactId);
+          
           const response = await ContactAPI.show(contactId);
           if (response.data && response.data.payload) {
             const contact = response.data.payload;
             displayContactName.value = contact.name || 'Unknown Caller';
-            console.log('Contact details fetched:', contact.name);
+            
+            // If there's incoming or active call data, update it with the avatar URL
+            if (incomingCall.value) {
+              incomingCall.value.avatarUrl = contact.avatar_url || null;
+              
+            }
+            if (activeCall.value) {
+              activeCall.value.avatarUrl = contact.avatar_url || null;
+            }
+            
+            
           }
         } catch (error) {
-          console.error('Error fetching contact details:', error);
+          
           displayContactName.value = 'Unknown Caller';
         }
       } else {
@@ -1387,11 +1389,11 @@ export default {
     };
 
     onMounted(() => {
-      console.log('FloatingCallWidget mounted, initializing components...');
+      
       
       // If this is an active call, start timer
       if (hasActiveCall.value) {
-        console.log('Active call detected, starting timer');
+        
         startDurationTimer();
       }
       
@@ -1407,7 +1409,7 @@ export default {
           }, 1000);
         } else if (!isOutboundCall) {
           // Only play ringtone for true inbound calls, not outbound ones
-          console.log('Inbound call detected, preparing ringtone');
+          
           
           // Slight delay to ensure DOM is fully rendered
           setTimeout(() => {
@@ -1425,16 +1427,16 @@ export default {
       if (props.useWebRTC) {
         // First check browser compatibility immediately
         if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-          console.log('WebRTC not supported in this browser');
+          
           isWebRTCSupported.value = false;
         } else {
-          console.log('WebRTC is supported, scheduling initialization');
+          
           
           // Check if we have an inbox ID available
           const inboxId = getAvailableInboxId();
           
           if (!inboxId) {
-            console.error('No inbox ID available during component mount. WebRTC initialization will be delayed.');
+            
             
             // We'll wait for store updates that might populate the inbox ID
             const storeWatcher = watch(
@@ -1443,7 +1445,7 @@ export default {
                 const newInboxId = getAvailableInboxId();
                 
                 if (newInboxId) {
-                  console.log(`Inbox ID is now available: ${newInboxId}, proceeding with WebRTC initialization`);
+                  
                   storeWatcher(); // Stop watching since we found an ID
                   
                   // Now continue with initialization since we have an inbox ID
@@ -1453,13 +1455,13 @@ export default {
               { immediate: true }
             );
           } else {
-            console.log(`Inbox ID available at mount: ${inboxId}, proceeding with WebRTC initialization`);
+            
             // We have an inbox ID, proceed with initialization
             initializeWebRTC();
           }
         }
       } else {
-        console.log('WebRTC is disabled for this component');
+        
       }
     });
     
@@ -1471,7 +1473,7 @@ export default {
         // 2. Request microphone permissions
         navigator.mediaDevices.getUserMedia({ audio: true })
           .then(() => {
-            console.log('Microphone permission granted, initializing device');
+            
             microphonePermission.value = 'granted';
             
             // 3. Wait a bit longer before fully initializing the device
@@ -1479,24 +1481,89 @@ export default {
               initializeTwilioDevice()
                 .then(success => {
                   if (success) {
-                    console.log('Twilio device initialized successfully on component mount');
+                    
                   } else {
-                    console.error('Twilio device initialization failed on component mount');
+                    
                   }
                 })
                 .catch(error => {
-                  console.error('Error during Twilio device initialization on mount:', error);
+                  
                 });
             }, 500);
           })
           .catch(error => {
-            console.error('Microphone permission denied during initial setup:', error);
+            
             microphonePermission.value = 'denied';
             useAlert('Browser call requires microphone access. Please enable it in your browser settings.');
           });
       }, 1000);
     };
 
+    const verifyTwoWayAudio = async () => {
+      try {
+        // 1. Stop and clear any existing audio stream
+        if (window.activeAudioStream) {
+          window.activeAudioStream.getTracks().forEach(track => track.stop());
+        }
+
+        // 2. Request a new audio stream with optimal constraints
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: {
+            echoCancellation: true,
+            noiseSuppression: true,
+            autoGainControl: true,
+            sampleRate: { ideal: 48000 },
+          },
+        });
+        window.activeAudioStream = stream;
+
+        // 3. Log track details for diagnostics (optional, can be removed in prod)
+        if (process.env.NODE_ENV === 'development') {
+          console.log(
+            '[verifyTwoWayAudio] Tracks:',
+            stream.getAudioTracks().map(track => ({
+              label: track.label,
+              enabled: track.enabled,
+              readyState: track.readyState,
+              muted: track.muted,
+              constraints: track.getConstraints(),
+            }))
+          );
+        }
+
+        // 4. Play a short beep to activate the audio subsystem
+        try {
+          // Play a short beep
+        } catch (error) {
+          // Ignore errors playing beep
+        }
+      } catch (error) {
+        // Handle errors checking remote media
+      }
+    };
+    
+    // End a WebRTC call using the VoiceAPI
+    const endWebRTCCall = () => {
+      if (!isWebRTCInitialized.value) return false;
+      
+      try {
+        // Use the VoiceAPI to end the client call
+        VoiceAPI.endClientCall();
+        
+        // Clean up audio resources
+        if (window.activeAudioStream) {
+          window.activeAudioStream.getTracks().forEach(track => {
+            track.stop();
+          });
+          window.activeAudioStream = null;
+        }
+        
+        return true;
+      } catch (error) {
+        return false;
+      }
+    };
+
     onBeforeUnmount(() => {
       stopDurationTimer();
       stopRingtone();
@@ -1565,7 +1632,7 @@ export default {
       () => store.state.calls.activeCall?.status,
       (newStatus) => {
         if (newStatus === 'ended' || newStatus === 'completed' || newStatus === 'missed') {
-          console.log('Call status changed to:', newStatus);
+          
           stopDurationTimer();
           stopRingtone();
           isCallActive.value = false;
@@ -1593,11 +1660,11 @@ export default {
         const isOutboundCall = newCall && newCall.isOutbound === true;
         
         if (isOutboundCall) {
-          console.log('Outbound call status:', newCall?.status);
+          
           
           // Handle outbound call status changes
           if (newCall?.status === 'ended' || newCall?.status === 'completed' || newCall?.status === 'missed') {
-            console.log('Outbound call ended with status:', newCall.status);
+            
             stopDurationTimer();
             stopRingtone();
             isCallActive.value = false;
@@ -1618,6 +1685,17 @@ export default {
       },
       { deep: true } // Watch for nested changes in the call object
     );
+    
+    // Watch for changes to contactName prop
+    watch(
+      () => props.contactName,
+      (newContactName) => {
+        if (newContactName) {
+          
+          displayContactName.value = newContactName;
+        }
+      }
+    );
 
     return {
       isCallActive,
@@ -1625,6 +1703,7 @@ export default {
       formattedCallDuration,
       isMuted,
       showCallOptions,
+      showKeypad,
       isFullscreen,
       isIncoming,
       isJoined,
@@ -1632,11 +1711,19 @@ export default {
       incomingCall,
       callInfo,
       displayContactName,
+      contactDisplayName,
+      contactAvatarUrl,
+      callerPhoneNumber,
+      inboxDisplayName,
+      inboxAvatarUrl,
+      inboxPhoneNumber,
       isWebRTCInitialized,
       isWebRTCSupported,
       microphonePermission,
       twilioDeviceStatus,
       currentVolume,
+      router,
+      route,
       endCall,
       forceEndCall,
       acceptCall,
@@ -1644,85 +1731,208 @@ export default {
       handleEndCallClick,
       toggleMute,
       toggleCallOptions,
+      toggleKeypad,
+      sendDTMFTone,
       toggleFullscreen,
       initializeTwilioDevice,
       safeTranslate,
+      endWebRTCCall,
     };
   },
 };
 </script>
 
 <template>
+  <!-- Main Widget Container -->
   <div
     class="floating-call-widget"
     :class="{
       'is-minimized': !showCallOptions,
       'is-fullscreen': isFullscreen,
       'is-incoming': isIncoming,
+      'has-keypad': showKeypad,
+      'has-call-options': showCallOptions,
     }"
   >
+    <!-- Call Header -->
     <div class="call-header">
       <div class="flex items-center justify-between w-full">
-        <div class="flex items-center gap-2">
-          <div class="call-icon-wrapper">
-            <span v-if="isIncoming" class="i-ph-phone-call text-xl" />
-            <span v-else class="i-ph-phone text-xl" />
+        <div class="flex items-center">
+          <!-- Left side with inbox avatar and call info -->
+          <div class="inbox-avatar">
+            <!-- Use the inbox avatar if available -->
+            <img 
+              v-if="inboxAvatarUrl" 
+              :src="inboxAvatarUrl" 
+              :alt="inboxDisplayName"
+              class="avatar-image"
+              @error="handleAvatarError"
+            />
+            <!-- Fallback to initial if no avatar -->
+            <span v-else>{{ inboxDisplayName.charAt(0).toUpperCase() }}</span>
           </div>
-          <div class="flex flex-col">
-            <h3 class="call-title">
-              {{ displayContactName }}
-            </h3>
-            <div class="call-subtitle">
-              {{ isIncoming ? $t('CONVERSATION.VOICE_CALL.INCOMING_CALL') : $t('CONVERSATION.VOICE_CALL.OUTGOING_CALL') }}
-            </div>
+          <div class="header-info">
+            <div class="voice-label">{{ inboxDisplayName }}</div>
+            <div class="phone-number">{{ inboxPhoneNumber }}</div>
           </div>
         </div>
-        <div class="call-duration" v-if="!isIncoming">
-          <span class="call-duration-label">{{ formattedCallDuration }}</span>
+        <div>
+          <!-- Right side with just the call timer (no icon) -->
+          <span class="call-time" v-if="!isIncoming">{{ formattedCallDuration }}</span>
         </div>
       </div>
     </div>
 
-    <div class="call-actions">
-      <button
-        v-if="isIncoming"
-        class="control-button accept-call-button"
-        @click="acceptCall"
-        :title="$t('CONVERSATION.VOICE_CALL.JOIN_CALL')"
-      >
-        <span class="i-ph-phone" />
-        <span class="button-text">{{ $t('CONVERSATION.VOICE_CALL.JOIN_CALL') }}</span>
-      </button>
-
-      <button
-        v-if="isIncoming"
-        class="control-button reject-call-button"
-        @click="rejectCall"
-        :title="$t('CONVERSATION.VOICE_CALL.REJECT_CALL')"
-      >
-        <span class="i-ph-phone-x" />
-        <span class="button-text">{{ $t('CONVERSATION.VOICE_CALL.REJECT_CALL') }}</span>
-      </button>
-
-      <button
-        v-if="!isIncoming"
-        class="control-button end-call-button"
-        @click="handleEndCallClick"
-        :title="$t('CONVERSATION.VOICE_CALL.END_CALL')"
-      >
-        <span class="i-ph-phone-x" />
-      </button>
-
-      <button
-        v-if="!isIncoming"
-        class="control-button mute-button"
-        :class="{ active: isMuted }"
-        @click="toggleMute"
-        :title="isMuted ? 'Unmute' : 'Mute'"
-      >
-        <span :class="isMuted ? 'i-ph-microphone-slash' : 'i-ph-microphone'" />
+    <!-- Call Content -->
+    <div class="call-content">
+      <!-- Participant Info - Only show the caller -->
+      <div class="participant-row">
+        <div class="participant contact">
+          <div class="avatar contact-avatar">
+            <img 
+              v-if="contactAvatarUrl" 
+              :src="contactAvatarUrl" 
+              :alt="contactDisplayName"
+              class="avatar-image"
+              @error="handleAvatarError"
+            />
+            <span v-else>{{ contactDisplayName.charAt(0).toUpperCase() }}</span>
+          </div>
+          <div class="name">{{ contactDisplayName }}</div>
+          <div class="phone-number-detail">{{ callerPhoneNumber }}</div>
+          <div class="call-status">In call</div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Keypad (when showKeypad is true) -->
+    <div v-if="showKeypad" class="keypad-container">
+      <div class="keypad-grid">
+        <button 
+          v-for="digit in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']" 
+          :key="digit" 
+          class="keypad-button"
+          @click="sendDTMFTone(digit)"
+        >
+          <span class="digit">{{ digit }}</span>
+          <span v-if="digit === '2'" class="subtext">ABC</span>
+          <span v-if="digit === '3'" class="subtext">DEF</span>
+          <span v-if="digit === '4'" class="subtext">GHI</span>
+          <span v-if="digit === '5'" class="subtext">JKL</span>
+          <span v-if="digit === '6'" class="subtext">MNO</span>
+          <span v-if="digit === '7'" class="subtext">PQRS</span>
+          <span v-if="digit === '8'" class="subtext">TUV</span>
+          <span v-if="digit === '9'" class="subtext">WXYZ</span>
+          <span v-if="digit === '0'" class="subtext">+</span>
+        </button>
+      </div>
+    </div>
+    
+    <!-- Call Options Menu (when showCallOptions is true) -->
+    <div v-if="showCallOptions" class="call-options-menu">
+      <button class="option-button">
+        <span class="i-ph-phone-pause"></span>
+        <span>Put call on hold</span>
       </button>
       
+      <button class="option-button">
+        <span class="i-ph-users"></span>
+        <span>Add people</span>
+      </button>
+      
+      <button class="option-button">
+        <span class="i-ph-arrow-square-out"></span>
+        <span>Transfer call</span>
+      </button>
+      
+      <button class="option-button" @click="toggleMute">
+        <span :class="isMuted ? 'i-ph-microphone-slash' : 'i-ph-microphone'"></span>
+        <span>{{ isMuted ? 'Unmute' : 'Mute' }} mic</span>
+      </button>
+      
+      <button class="option-button">
+        <span class="i-ph-record"></span>
+        <span>Record call</span>
+      </button>
+      
+      <button class="option-button" @click="toggleKeypad">
+        <!-- Custom keypad icon as fallback -->
+        <div class="custom-keypad-icon">
+          <div class="keypad-grid-icon">
+            <div class="keypad-dot"></div>
+            <div class="keypad-dot"></div>
+            <div class="keypad-dot"></div>
+            <div class="keypad-dot"></div>
+          </div>
+        </div>
+        <span>{{ showKeypad ? 'Hide' : 'Show' }} keypad</span>
+      </button>
+      
+      <button class="option-button">
+        <span class="i-ph-speaker-high"></span>
+        <span>Audio settings</span>
+      </button>
+      
+      <button class="option-button end-call" @click="handleEndCallClick">
+        <span class="i-ph-phone-x"></span>
+        <span>End call</span>
+      </button>
+    </div>
+
+    <!-- Call Controls -->
+    <div class="call-controls">
+      <!-- Incoming Call Controls -->
+      <template v-if="isIncoming">
+        <button
+          class="control-button reject-call-button"
+          @click="rejectCall"
+          :title="$t('CONVERSATION.VOICE_CALL.REJECT_CALL')"
+        >
+          <span class="i-ph-phone-x"></span>
+          <span class="button-text">{{ safeTranslate('CONVERSATION.VOICE_CALL.REJECT_CALL') }}</span>
+        </button>
+
+        <button
+          class="control-button accept-call-button"
+          @click="acceptCall"
+          :title="$t('CONVERSATION.VOICE_CALL.JOIN_CALL')"
+        >
+          <span class="i-ph-phone"></span>
+          <span class="button-text">{{ safeTranslate('CONVERSATION.VOICE_CALL.JOIN_CALL') }}</span>
+        </button>
+      </template>
+
+      <!-- Active Call Controls -->
+      <template v-else>
+        <button class="round-control-button" :class="{ 'active': isMuted }" @click="toggleMute">
+          <span :class="isMuted ? 'i-ph-microphone-slash' : 'i-ph-microphone'"></span>
+        </button>
+        
+        <button class="round-control-button" :class="{ 'active': showKeypad }" @click="toggleKeypad">
+          <!-- Custom keypad icon as fallback -->
+          <div class="custom-keypad-icon">
+            <div class="keypad-grid-icon">
+              <div class="keypad-dot"></div>
+              <div class="keypad-dot"></div>
+              <div class="keypad-dot"></div>
+              <div class="keypad-dot"></div>
+            </div>
+          </div>
+        </button>
+        
+        <button class="round-control-button" @click="toggleCallOptions">
+          <!-- Custom dots icon as fallback -->
+          <div class="custom-dots-icon">
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+          </div>
+        </button>
+        
+        <button class="round-control-button end-call-button" @click="handleEndCallClick">
+          <span class="i-ph-phone-x"></span>
+        </button>
+      </template>
     </div>
     
     <!-- WebRTC Status indicator -->
@@ -1738,27 +1948,81 @@ export default {
           'is-error': isWebRTCInitialized && twilioDeviceStatus === 'error',
         }"
       >
-        <span class="webrtc-dot"></span>
-        <span class="webrtc-text">
-          <!-- Different messages based on status -->
-          <template v-if="!isWebRTCSupported">
-            Browser calls not supported
-          </template>
-          <template v-else-if="!isWebRTCInitialized">
-            Browser call initializing...
-          </template>
-          <template v-else>
-            Browser Call: {{ twilioDeviceStatus === 'ready' ? 'Ready' : twilioDeviceStatus }}
-          </template>
+        <div class="webrtc-status-content">
+          <span class="status-dot" :class="{ 
+            'dot-active': isWebRTCInitialized && twilioDeviceStatus === 'ready',
+            'dot-busy': isWebRTCInitialized && twilioDeviceStatus === 'busy',
+            'dot-error': !isWebRTCInitialized || twilioDeviceStatus === 'error'
+          }"></span>
           
-          <!-- Mic status if initialized -->
-          <template v-if="isWebRTCInitialized">
-            <span class="mic-status">
-              <span :class="isMuted ? 'i-ph-microphone-slash text-xs' : 'i-ph-microphone text-xs'"></span>
-              {{ isMuted ? 'Muted' : 'Active' }}
-            </span>
-          </template>
+          <span class="status-text">
+            Browser Call: {{ 
+              twilioDeviceStatus === 'ready' ? 'Ready' : 
+              twilioDeviceStatus === 'busy' ? 'Connected' : 
+              twilioDeviceStatus === 'error' ? 'Error' : 
+              'Initializing...' 
+            }}
+          </span>
+          
+          <span class="divider">|</span>
+          
+          <span class="mic-status-icon">
+            <span :class="isMuted ? 'i-ph-microphone-slash text-xs' : 'i-ph-microphone text-xs'"></span>
+            {{ isMuted ? 'Muted' : 'Active' }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Incoming Call Modal (simplified overlay version) -->
+  <div v-if="isIncoming && !isCallActive" class="incoming-call-modal">
+    <div class="incoming-call-container">
+      <div class="incoming-call-header">
+        <span class="inbox-name">
+          <!-- Add inbox avatar to the header -->
+          <img 
+            v-if="inboxAvatarUrl" 
+            :src="inboxAvatarUrl" 
+            :alt="inboxDisplayName"
+            class="inline-avatar"
+            style="width: 24px; height: 24px; border-radius: 4px; margin-right: 6px;"
+          />
+          {{ inboxDisplayName }}
         </span>
+        <span class="incoming-call-text">Incoming call</span>
+      </div>
+      
+      <div class="caller-info">
+        <!-- Use a proper avatar image with initials fallback -->
+        <div class="caller-avatar">
+          <img 
+            v-if="contactAvatarUrl" 
+            :src="contactAvatarUrl" 
+            :alt="contactDisplayName"
+            class="avatar-image"
+            @error="handleAvatarError"
+          />
+          <span v-else class="avatar-initials">{{ contactDisplayName.charAt(0).toUpperCase() }}</span>
+        </div>
+        <h2 class="caller-name">{{ contactDisplayName }}</h2>
+        <p class="calling-status">is calling {{ inboxDisplayName }}</p>
+      </div>
+      
+      <div class="incoming-call-actions">
+        <button class="reject-button" @click="rejectCall">
+          <span class="i-ph-phone-x"></span>
+          <span>Decline</span>
+        </button>
+        
+        <button class="accept-button" @click="acceptCall">
+          <span class="i-ph-phone"></span>
+          <span>Accept</span>
+        </button>
+      </div>
+      
+      <div class="incoming-call-note">
+        Declining a call still allows others in the shared inbox to pick up
       </div>
     </div>
   </div>
@@ -1803,6 +2067,16 @@ export default {
     border-color: var(--b-600, #374151);
     background-color: rgba(31, 41, 55, 0.95); /* Same background, no red */
   }
+  
+  &.has-keypad {
+    height: auto;
+    min-height: 460px;
+  }
+  
+  &.has-call-options {
+    height: auto;
+    min-height: 500px;
+  }
 }
 
 .call-header {
@@ -1810,136 +2084,624 @@ export default {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
-  padding: 0 0 8px 0;
+  padding: 0 0 12px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.call-icon-wrapper {
+.inbox-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background-color: #4263EB; // Chatwoot blue color instead of orange
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: var(--b-500, #4b5563);
+  font-weight: 600;
+  font-size: 16px;
   color: white;
+  margin-right: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  position: relative;
+  
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  
+  // When avatar fails to load, restore the initials display
+  &.avatar-fallback {
+    .avatar-image {
+      display: none;
+    }
+  }
 }
 
-.call-title {
-  margin: 0;
+.header-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.voice-label {
   font-size: 16px;
   font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 180px;
+  color: white;
   line-height: 1.2;
 }
 
-.call-subtitle {
-  font-size: 12px;
-  color: var(--s-200, #9ca3af);
-  margin-top: 2px;
-}
-
-.call-duration {
+.phone-number {
   font-size: 14px;
-  font-weight: 500;
-  color: var(--s-100, #f3f4f6);
-  background-color: var(--b-600, #374151);
-  padding: 4px 8px;
-  border-radius: 12px;
+  color: var(--s-300, #9ca3af);
+  line-height: 1.2;
 }
 
-.call-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: center;
+.call-time {
+  font-size: 16px;
+  font-weight: 500;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.35);
+  padding: 6px 12px;
+  border-radius: 20px;
+}
 
-  .control-button {
+.call-content {
+  flex: 1;
+  margin-bottom: 16px;
+}
+
+.participant-row {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+}
+
+.participant {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  
+  .avatar {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
-    border: none;
-    cursor: pointer;
-    background: var(--b-600, #374151);
-    color: white;
-    font-size: 18px;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-
-    &:hover {
-      background: var(--b-500, #4b5563);
-      transform: translateY(-2px);
-    }
-
-    &:active {
-      transform: translateY(0);
-    }
-
-    &.active {
-      background: var(--w-500, #2563eb);
-    }
-
-    &.end-call-button {
-      background: var(--r-500, #dc2626);
-
-      &:hover {
-        background: var(--r-600, #b91c1c);
-      }
+    font-weight: 600;
+    font-size: 22px;
+    border: 2px solid rgba(255, 255, 255, 0.15);
+    overflow: hidden;
+    background-color: var(--b-500, #4b5563);
+    position: relative;
+    
+    .avatar-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      position: absolute;
+      top: 0;
+      left: 0;
     }
     
-
-    &.accept-call-button,
-    &.reject-call-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      flex: 1;
-      height: 44px;
-      border-radius: 22px;
-      border: none;
-      cursor: pointer;
-      font-weight: 600;
-      font-size: 14px;
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
-    }
-
-    &.accept-call-button {
-      background: var(--g-500, #10b981);
-      color: white;
-
-      &:hover {
-        background: var(--g-600, #059669);
-        transform: translateY(-2px);
+    // When avatar fails to load, restore the initials display
+    &.avatar-fallback {
+      .avatar-image {
+        display: none;
       }
-      
-      &:active {
-        transform: translateY(0);
-      }
-    }
-
-    &.reject-call-button {
-      background: var(--r-500, #dc2626);
-      color: white;
-
-      &:hover {
-        background: var(--r-600, #b91c1c);
-        transform: translateY(-2px);
-      }
-      
-      &:active {
-        transform: translateY(0);
-      }
-    }
-
-    .button-text {
-      margin-left: 8px;
     }
   }
+  
+  .name {
+    font-size: 16px;
+    font-weight: 600;
+    max-width: 200px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+  }
+  
+  .phone-number-detail {
+    font-size: 14px;
+    color: var(--s-400, #9ca3af);
+    margin-top: 2px;
+    margin-bottom: 4px;
+  }
+  
+  .call-status {
+    font-size: 12px;
+    color: var(--s-300, #a3a3a3);
+    padding: 3px 10px;
+    border-radius: 10px;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.keypad-container {
+  margin: 8px 0 16px;
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.keypad-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.keypad-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  background-color: rgba(55, 65, 81, 0.5);
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: white;
+  
+  &:hover {
+    background-color: var(--b-500, #4b5563);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+  
+  .digit {
+    font-size: 18px;
+    font-weight: 600;
+  }
+  
+  .subtext {
+    font-size: 10px;
+    color: var(--s-300, #9ca3af);
+    margin-top: 2px;
+  }
+}
+
+.call-options-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 8px 0 16px;
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.option-button {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background-color: rgba(55, 65, 81, 0.5);
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: white;
+  text-align: left;
+  
+  &:hover {
+    background-color: var(--b-500, #4b5563);
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+  
+  &.end-call {
+    background-color: rgba(220, 38, 38, 0.8);
+    
+    &:hover {
+      background-color: var(--r-600, #b91c1c);
+    }
+  }
+  
+  span:first-child {
+    font-size: 18px;
+  }
+}
+
+.call-controls {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-top: auto;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.round-control-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  background: var(--b-600, #4f546a);
+  color: white;
+  font-size: 20px;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  
+  // Add a slight inner border
+  position: relative;
+  
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+    pointer-events: none;
+  }
+
+  &:hover {
+    background: var(--b-500, #5a5f77);
+  }
+
+  &:active {
+    transform: scale(0.97);
+  }
+
+  &.active {
+    background: var(--w-500, #2563eb);
+  }
+
+  &.end-call-button {
+    background: var(--r-500, #eb4646);
+
+    &:hover {
+      background: var(--r-600, #d62b2b);
+    }
+  }
+  
+  // Make sure the icons are centered properly
+  [class^="i-ph-"] {
+    position: relative;
+    top: 2px;
+  }
+  
+  // Custom keypad icon (fallback)
+  .custom-keypad-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    .keypad-grid-icon {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      gap: 3px;
+      width: 16px;
+      height: 16px;
+      
+      .keypad-dot {
+        width: 6px;
+        height: 6px;
+        background-color: white;
+        border-radius: 1px;
+      }
+    }
+  }
+  
+  // Custom dots icon (fallback)
+  .custom-dots-icon {
+    display: flex;
+    gap: 3px;
+    
+    .dot {
+      width: 5px;
+      height: 5px;
+      background-color: white;
+      border-radius: 50%;
+    }
+  }
+}
+
+.control-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex: 1;
+  height: 44px;
+  border-radius: 22px;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.accept-call-button {
+  background: var(--g-500, #10b981);
+  color: white;
+
+  &:hover {
+    background: var(--g-600, #059669);
+    transform: translateY(-2px);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.reject-call-button {
+  background: var(--r-500, #dc2626);
+  color: white;
+
+  &:hover {
+    background: var(--r-600, #b91c1c);
+    transform: translateY(-2px);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.button-text {
+  margin-left: 4px;
+}
+
+// WebRTC indicator styles
+.webrtc-status {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.webrtc-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 12px;
+  color: var(--s-300, #9ca3af);
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 12px;
+  padding: 6px 10px;
+}
+
+.webrtc-status-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  
+  &.dot-active {
+    background-color: #34c759; // Green status
+  }
+  
+  &.dot-busy {
+    background-color: #5ac8fa; // Blue status
+  }
+  
+  &.dot-error {
+    background-color: #ff3b30; // Red status
+  }
+}
+
+.status-text {
+  font-weight: 500;
+  color: #f3f3f3;
+  white-space: nowrap;
+}
+
+.divider {
+  color: rgba(255, 255, 255, 0.3);
+  margin: 0 4px;
+}
+
+.mic-status-icon {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  
+  [class^="i-ph-"] {
+    position: relative;
+    top: 1px;
+  }
+}
+
+// Incoming call modal
+.incoming-call-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(5px);
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.3s ease;
+}
+
+.incoming-call-container {
+  width: 100%;
+  max-width: 380px;
+  background-color: #121212;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: white;
+}
+
+.incoming-call-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0 16px 0;
+}
+
+.inbox-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  
+  // We're now using the actual inbox avatar image instead of this pseudo-element
+  // The before element is removed as it's no longer needed
+}
+
+.incoming-call-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: #a3a3a3;
+}
+
+.caller-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 16px 0 20px 0;
+}
+
+.caller-avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background-color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  border: 3px solid rgba(255, 255, 255, 0.15);
+  overflow: hidden;
+  position: relative;
+  
+  // Add a subtle shadow for depth
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  
+  // Background pattern for fallback state
+  background-image: 
+    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+  background-size: 10px 10px;
+  
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+  
+  .avatar-initials {
+    font-size: 42px;
+    font-weight: 600;
+    color: white;
+  }
+}
+
+.caller-name {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 8px;
+}
+
+.calling-status {
+  font-size: 16px;
+  color: #a3a3a3;
+  margin: 0;
+}
+
+.incoming-call-actions {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+  margin-bottom: 16px;
+  
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    flex: 1;
+    height: 50px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    
+    span:first-child {
+      font-size: 20px;
+    }
+  }
+  
+  .reject-button {
+    background-color: #e64c38;
+    color: white;
+    
+    &:hover {
+      background-color: #d53c28;
+    }
+    
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+  
+  .accept-button {
+    background-color: #34c759;
+    color: white;
+    
+    &:hover {
+      background-color: #2bb550;
+    }
+    
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+}
+
+.incoming-call-note {
+  width: 100%;
+  text-align: center;
+  font-size: 13px;
+  color: #8e8e8e;
+  margin-top: 8px;
+  line-height: 1.4;
 }
 
 @keyframes pulse {
@@ -1957,90 +2719,6 @@ export default {
   }
 }
 
-// WebRTC indicator styles
-.webrtc-status {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  display: flex;
-  justify-content: center;
-}
-
-.webrtc-indicator {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  color: var(--s-300, #9ca3af);
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 12px;
-  padding: 4px 8px;
-  
-  // Different states for the indicator
-  &.is-active .webrtc-dot {
-    background-color: var(--g-500, #10b981);
-  }
-  
-  &.is-inactive .webrtc-dot {
-    background-color: var(--y-500, #f59e0b);
-    animation: webrtcPulse 1.5s infinite;
-  }
-  
-  &.is-unsupported .webrtc-dot {
-    background-color: var(--s-400, #6b7280);
-  }
-  
-  &.is-ready .webrtc-dot {
-    background-color: var(--g-500, #10b981);
-  }
-  
-  &.is-busy .webrtc-dot {
-    background-color: var(--b-400, #60a5fa);
-  }
-  
-  &.is-error .webrtc-dot {
-    background-color: var(--r-500, #dc2626);
-  }
-}
-
-.webrtc-dot {
-  width: 8px;
-  height: 8px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  background-color: var(--r-500, #dc2626);
-  margin-right: 6px;
-  position: relative;
-  
-  &:after {
-    content: '';
-    position: absolute;
-    top: -2px;
-    left: -2px;
-    right: -2px;
-    bottom: -2px;
-    border-radius: 50%;
-    border: 1px solid currentColor;
-    animation: webrtcPulse 1.5s infinite;
-  }
-}
-
-.webrtc-text {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  white-space: nowrap;
-}
-
-.mic-status {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: 8px;
-  padding-left: 8px;
-  border-left: 1px solid rgba(255, 255, 255, 0.2);
-}
-
 @keyframes webrtcPulse {
   0% {
     transform: scale(1);
@@ -2055,4 +2733,9 @@ export default {
     opacity: 0;
   }
 }
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
 </style>
diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js
index dcc1d4e65..842f33d1e 100644
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@@ -203,17 +203,19 @@ class ActionCableConnector extends BaseActionCableConnector {
       conversationId: data.conversation_id,
       inboxId: data.inbox_id,
       inboxName: data.inbox_name,
-      contactName: data.contact_name,
+      inboxAvatarUrl: data.inbox_avatar_url, // Inbox avatar URL
+      inboxPhoneNumber: data.inbox_phone_number, // Inbox phone number
+      contactName: data.contact_name || 'Unknown Caller', // Add fallback name
       contactId: data.contact_id,
       accountId: data.account_id,
       isOutbound: data.is_outbound || false, // Check if this is an outbound call requiring agent join
       conference_sid: data.conference_sid, // Pass the conference_sid directly to the floating widget
       requiresAgentJoin: data.requires_agent_join || false, // Flag for calls needing immediate agent join
-      callDirection: data.call_direction // Add call direction for additional context
+      callDirection: data.call_direction, // Add call direction for additional context
+      phoneNumber: data.phone_number, // Include phone number for display in the UI
+      avatarUrl: data.avatar_url // Include avatar URL for display in the UI
     };
     
-    // Process outbound calls
-    
     // Update store
     this.app.$store.dispatch('calls/setIncomingCall', normalizedPayload);
     
@@ -221,8 +223,6 @@ class ActionCableConnector extends BaseActionCableConnector {
     if (window.app && window.app.$data) {
       window.app.$data.showCallWidget = true;
     }
-    
-    // For outbound calls, we don't need to play a ringtone as we're initiating the call
   };
 
   onCallStatusChanged = data => {
@@ -240,20 +240,16 @@ class ActionCableConnector extends BaseActionCableConnector {
     
     // For terminal statuses, clear the active call to close the widget
     if (['ended', 'missed', 'completed', 'failed', 'busy', 'no_answer'].includes(data.status)) {
-      console.log(`ActionCable: Call status changed to terminal status: ${data.status}`);
-      
       // Clear active call for terminal statuses
       this.app.$store.dispatch('calls/clearActiveCall');
       
       // Ensure window.app.$data exists before modifying it
       if (window.app && window.app.$data) {
-        console.log('ActionCable: Hiding call widget');
         window.app.$data.showCallWidget = false;
       }
       
       // Update conversation list to show current status
       if (data.conversation_id) {
-        console.log(`ActionCable: Updating conversation last activity for conversation ${data.conversation_id}`);
         this.app.$store.dispatch('updateConversationLastActivity', {
           conversationId: data.conversation_id,
           lastActivityAt: new Date().toISOString(),
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 311309fc5..8c8271f09 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -63,7 +63,15 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ uiFlags: 'contacts/getUIFlags' }),
+    ...mapGetters({ 
+      uiFlags: 'contacts/getUIFlags',
+      storeActiveCall: 'calls/getActiveCall',
+      storeHasActiveCall: 'calls/hasActiveCall',
+    }),
+    // Check if there's an active call either in store or local component
+    hasActiveCall() {
+      return this.storeHasActiveCall || !!this.activeCallConversation;
+    },
     contactProfileLink() {
       return `/app/accounts/${this.$route.params.accountId}/contacts/${this.contact.id}`;
     },
@@ -242,9 +250,15 @@ export default {
     },
 
     handleCallEnded() {
+      // Immediately reset local state
       this.activeCallConversation = null;
+      this.isCallLoading = false;
+      
       // Clear global call state
       this.$store.dispatch('calls/clearActiveCall');
+      
+      // Force re-render the component to ensure button state updates
+      this.$forceUpdate();
     },
 
     // Simplified emergency end call function
@@ -446,12 +460,29 @@ export default {
       this.showMergeModal = true;
     },
     onCallButtonClick() {
-      if (this.activeCallConversation) {
-        useAlert('Call already ongoing', 'warning');
+      // If there's an active call in the store, just show widget
+      if (this.storeHasActiveCall) {
+        useAlert('Call already active, showing call widget', 'info');
         if (window.app && window.app.$data) {
           window.app.$data.showCallWidget = true;
         }
+        return;
+      }
+      
+      // Check if we have a stale local state
+      if (this.activeCallConversation) {
+        // Reset our local state
+        this.activeCallConversation = null;
+        this.$forceUpdate();
+        
+        // If store is clear, initiate a new call after state reset
+        if (!this.storeHasActiveCall) {
+          this.$nextTick(() => {
+            this.initiateVoiceCall();
+          });
+        }
       } else {
+        // No active call, proceed with initiating a new one
         this.initiateVoiceCall();
       }
     },
@@ -570,15 +601,13 @@ export default {
         </ComposeConversation>
         <NextButton
           v-if="contact.phone_number"
-          v-tooltip.top-end="
-            activeCallConversation ? 'Call already ongoing' : 'Call'
-          "
+          v-tooltip.top-end="hasActiveCall ? 'Call already ongoing' : 'Call'"
           icon="i-ph-phone"
           slate
           faded
           sm
-          :is-loading="!activeCallConversation && isCallLoading"
-          :color="activeCallConversation ? 'teal' : undefined"
+          :is-loading="!hasActiveCall && isCallLoading"
+          :color="hasActiveCall ? 'teal' : undefined"
           @click.stop.prevent="onCallButtonClick"
         />
         <NextButton
diff --git a/app/services/voice/conference_status_service.rb b/app/services/voice/conference_status_service.rb
index cc46f0856..77432efbb 100644
--- a/app/services/voice/conference_status_service.rb
+++ b/app/services/voice/conference_status_service.rb
@@ -33,8 +33,6 @@ module Voice
     }.freeze
 
     def process
-      # Log incoming parameters
-      Rails.logger.info("🎤 CONFERENCE STATUS: #{params['StatusCallbackEvent']}")
       
       # Extract status info and find conversation
       info = status_info
@@ -46,7 +44,6 @@ module Voice
       update_participant_info(conversation, info)
       
       # Process the event with the conference manager
-      Rails.logger.info("📊 PROCESSING EVENT: #{info[:event]}")
       
       Voice::ConferenceManagerService.new(
         conversation: conversation,
@@ -96,7 +93,6 @@ module Voice
         return conversation if conversation
       end
       
-      Rails.logger.error("❌ CONVERSATION NOT FOUND for event: #{info[:event]}")
       nil
     end
     
@@ -164,22 +160,35 @@ module Voice
 
     def broadcast_agent_notification(conversation, info)
       contact = conversation.contact
+      inbox = conversation.inbox
+      
+      # Get contact name, ensuring we have a valid value
+      contact_name_value = contact&.name.presence || contact&.phone_number || 'Outbound Call'
+      
+      # Create the data payload
+      broadcast_data = {
+        call_sid: info[:call_sid],
+        conversation_id: conversation.id,
+        inbox_id: conversation.inbox_id,
+        inbox_name: conversation.inbox.name,
+        inbox_avatar_url: inbox.avatar_url, # Include inbox avatar
+        inbox_phone_number: inbox.channel.phone_number, # Include inbox phone number
+        contact_name: contact_name_value,
+        contact_id: contact&.id,
+        is_outbound: true,
+        account_id: account.id,
+        conference_sid: info[:conference_sid],
+        phone_number: contact&.phone_number, # Include phone number for display in UI
+        avatar_url: contact&.avatar_url, # Include avatar URL for display in UI
+        call_direction: 'outbound' # Add call direction for context
+      }
+      
       
       ActionCable.server.broadcast(
         "account_#{account.id}",
         {
           event: 'incoming_call',
-          data: {
-            call_sid: info[:call_sid],
-            conversation_id: conversation.id,
-            inbox_id: conversation.inbox_id,
-            inbox_name: conversation.inbox.name,
-            contact_name: contact&.name || 'Outbound Call',
-            contact_id: contact&.id,
-            is_outbound: true,
-            account_id: account.id,
-            conference_sid: info[:conference_sid]
-          }
+          data: broadcast_data
         }
       )
     end
diff --git a/app/services/voice/incoming_call_service.rb b/app/services/voice/incoming_call_service.rb
index 6cb89a8ef..628bd8a81 100644
--- a/app/services/voice/incoming_call_service.rb
+++ b/app/services/voice/incoming_call_service.rb
@@ -3,8 +3,6 @@ module Voice
     pattr_initialize [:account!, :params!]
 
     def process
-      Rails.logger.info("🔍 INCOMING CALL: Starting processing for call_sid=#{caller_info[:call_sid]}")
-      Rails.logger.info("📞 CALL DETAILS: From=#{caller_info[:from_number]} To=#{caller_info[:to_number]}")
 
       begin
         find_inbox
@@ -22,11 +20,8 @@ module Voice
 
         twiml = generate_twiml_response
 
-        Rails.logger.info("✅ INCOMING CALL: Successfully processed for call_sid=#{caller_info[:call_sid]}")
         twiml
       rescue StandardError => e
-        Rails.logger.error("❌ INCOMING CALL ERROR: #{e.message}")
-        Rails.logger.error("❌ INCOMING CALL BACKTRACE: #{e.backtrace[0..5].join("\n")}")
 
         # Return a simple error TwiML
         error_twiml(e.message)
@@ -53,7 +48,6 @@ module Voice
 
       raise "Inbox not found for phone number #{caller_info[:to_number]}" unless @inbox.present?
 
-      Rails.logger.info("📥 FOUND INBOX: inbox_id=#{@inbox.id} for phone=#{caller_info[:to_number]}")
     end
 
     def create_contact
@@ -65,7 +59,6 @@ module Voice
         c.name = "Contact from #{phone_number}"
       end
 
-      Rails.logger.info("👤 CONTACT: contact_id=#{@contact.id} name=#{@contact.name} phone=#{@contact.phone_number}")
     end
 
     def create_conversation
@@ -79,7 +72,6 @@ module Voice
       @contact_inbox.source_id ||= caller_info[:from_number]
       @contact_inbox.save!
 
-      Rails.logger.info("📬 CONTACT INBOX: id=#{@contact_inbox.id} source_id=#{@contact_inbox.source_id}")
 
       # Create a new conversation with basic call details
       # Status will be properly set by CallStatusManager later
@@ -101,7 +93,6 @@ module Voice
       @conversation.additional_attributes['conference_sid'] = conference_name
       @conversation.save!
 
-      Rails.logger.info("💬 CONVERSATION: id=#{@conversation.id} display_id=#{@conversation.display_id} conference=#{conference_name}")
     end
 
     def create_voice_call_message
@@ -144,7 +135,6 @@ module Voice
         message_params
       ).perform
 
-      Rails.logger.info("✉️ VOICE CALL MESSAGE: id=#{@voice_call_message.id} content_type=#{@voice_call_message.content_type}")
 
       # Broadcast call notification
       broadcast_call_status
@@ -167,27 +157,37 @@ module Voice
         "Incoming call from #{@contact.name.presence || caller_info[:from_number]}"
       )
 
-      Rails.logger.info("📝 ACTIVITY MESSAGE: id=#{activity_message.id}")
     end
 
     def broadcast_call_status
+      # Get contact name, ensuring we have a valid value
+      contact_name_value = @contact.name.presence || caller_info[:from_number]
+      
+      # Create the data payload
+      broadcast_data = {
+        call_sid: caller_info[:call_sid],
+        conversation_id: @conversation.id,
+        inbox_id: @inbox.id,
+        inbox_name: @inbox.name,
+        inbox_avatar_url: @inbox.avatar_url, # Include inbox avatar
+        inbox_phone_number: @inbox.channel.phone_number, # Include inbox phone number
+        contact_name: contact_name_value,
+        contact_id: @contact.id,
+        account_id: account.id,
+        phone_number: @contact.phone_number, # Include phone number for display in UI
+        avatar_url: @contact.avatar_url, # Include avatar URL for display in UI
+        call_direction: 'inbound' # Add call direction for context
+      }
+      
+      
       ActionCable.server.broadcast(
         "account_#{account.id}",
         {
           event: 'incoming_call',
-          data: {
-            call_sid: caller_info[:call_sid],
-            conversation_id: @conversation.id,
-            inbox_id: @inbox.id,
-            inbox_name: @inbox.name,
-            contact_name: @contact.name || caller_info[:from_number],
-            contact_id: @contact.id,
-            account_id: account.id
-          }
+          data: broadcast_data
         }
       )
 
-      Rails.logger.info('📢 BROADCAST: Sent incoming_call notification')
     end
 
     def generate_twiml_response
@@ -197,7 +197,6 @@ module Voice
       response.say(message: 'Thank you for calling. Please wait while we connect you with an agent.')
 
       callback_url = "#{base_url}/api/v1/accounts/#{account.id}/channels/voice/webhooks/conference_status"
-      Rails.logger.info("🔗 CONFERENCE CALLBACK URL: #{callback_url}")
 
       response.dial do |dial|
         dial.conference(
@@ -214,7 +213,6 @@ module Voice
         )
       end
 
-      Rails.logger.info("📞 TWIML: Generated conference TwiML for #{conference_name}")
       response.to_s
     end
 
@@ -223,13 +221,11 @@ module Voice
       response.say(message: 'We are experiencing technical difficulties with our phone system. Please try again later.')
       response.hangup
 
-      Rails.logger.info("❌ ERROR TWIML: Generated error TwiML due to: #{message}")
       response.to_s
     end
 
     def base_url
       url = ENV.fetch('FRONTEND_URL', "https://#{params['host_with_port']}")
-      Rails.logger.info("🌐 BASE URL: Using #{url}")
       url.gsub(%r{/$}, '') # Remove trailing slash if present
     end
   end
diff --git a/app/services/voice/outgoing_call_service.rb b/app/services/voice/outgoing_call_service.rb
index f44a88fda..40d83de9e 100644
--- a/app/services/voice/outgoing_call_service.rb
+++ b/app/services/voice/outgoing_call_service.rb
@@ -26,6 +26,7 @@ module Voice
       @voice_inbox = account.inboxes.find_by(channel_type: 'Channel::Voice')
       raise 'No Voice channel found' if @voice_inbox.blank?
       raise 'Contact has no phone number' if contact.phone_number.blank?
+      
     end
 
     def create_conversation
@@ -122,24 +123,34 @@ module Voice
     end
 
     def broadcast_to_agent
+      # Get contact name, ensuring we have a valid value
+      contact_name_value = contact.name.presence || contact.phone_number
+      
+      # Create the data payload
+      broadcast_data = {
+        call_sid: @call_details[:call_sid],
+        conversation_id: @conversation.id,
+        inbox_id: @voice_inbox.id,
+        inbox_name: @voice_inbox.name,
+        inbox_avatar_url: @voice_inbox.avatar_url, # Include inbox avatar
+        inbox_phone_number: @voice_inbox.channel.phone_number, # Include inbox phone number
+        contact_name: contact_name_value,
+        contact_id: contact.id,
+        account_id: account.id,
+        is_outbound: true,
+        conference_sid: @conference_name,
+        requires_agent_join: true,
+        call_direction: 'outbound',
+        phone_number: contact.phone_number, # Include phone number for display in the UI
+        avatar_url: contact.avatar_url # Include avatar URL for display in the UI
+      }
+      
       # Direct notification that agent needs to join
       ActionCable.server.broadcast(
         "account_#{account.id}",
         {
           event: 'incoming_call',
-          data: {
-            call_sid: @call_details[:call_sid],
-            conversation_id: @conversation.id,
-            inbox_id: @voice_inbox.id,
-            inbox_name: @voice_inbox.name,
-            contact_name: contact.name || contact.phone_number,
-            contact_id: contact.id,
-            account_id: account.id,
-            is_outbound: true,
-            conference_sid: @conference_name,
-            requires_agent_join: true,
-            call_direction: 'outbound'
-          }
+          data: broadcast_data
         }
       )