chore: floating call button

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue

@@ -272,11 +272,11 @@ defineExpose({
             class="w-full"
             @input="
               isValidationField(item.key) &&
-                v$[getValidationKey(item.key)].$touch()
+              v$[getValidationKey(item.key)].$touch()
             "
             @blur="
               isValidationField(item.key) &&
-                v$[getValidationKey(item.key)].$touch()
+              v$[getValidationKey(item.key)].$touch()
             "
           />
         </template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue

@@ -108,7 +108,13 @@ const onCardClick = e => {
             v-tooltip.left="inboxName"
             class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
           >
+            <!-- Special handling for voice channel -->
+            <span
+              v-if="inbox.channelType === 'Channel::Voice'"
+              class="i-ph-phone-fill text-n-slate-11 size-3"
+            />
             <Icon
+              v-else
               :icon="inboxIcon"
               class="flex-shrink-0 text-n-slate-11 size-3"
             />

app/javascript/dashboard/components-next/button/Button.vue

@@ -60,38 +60,47 @@ const filteredAttrs = computed(() => {
 const computedVariant = computed(() => {
   if (props.variant) return props.variant;
   // The useAttrs method returns attributes values an empty string (not boolean value as in props).
-  if (attrs.solid || attrs.solid === '') return 'solid';
-  if (attrs.outline || attrs.outline === '') return 'outline';
-  if (attrs.faded || attrs.faded === '') return 'faded';
-  if (attrs.link || attrs.link === '') return 'link';
-  if (attrs.ghost || attrs.ghost === '') return 'ghost';
+  // Add defensive checks for undefined attrs
+  const attrObj = attrs || {};
+  if (attrObj.solid || attrObj.solid === '') return 'solid';
+  if (attrObj.outline || attrObj.outline === '') return 'outline';
+  if (attrObj.faded || attrObj.faded === '') return 'faded';
+  if (attrObj.link || attrObj.link === '') return 'link';
+  if (attrObj.ghost || attrObj.ghost === '') return 'ghost';
   return 'solid'; // Default variant
 });
 
 const computedColor = computed(() => {
   if (props.color) return props.color;
-  if (attrs.blue || attrs.blue === '') return 'blue';
-  if (attrs.ruby || attrs.ruby === '') return 'ruby';
-  if (attrs.amber || attrs.amber === '') return 'amber';
-  if (attrs.slate || attrs.slate === '') return 'slate';
-  if (attrs.teal || attrs.teal === '') return 'teal';
+  // Add defensive checks for undefined attrs
+  const attrObj = attrs || {};
+  if (attrObj.blue || attrObj.blue === '') return 'blue';
+  if (attrObj.ruby || attrObj.ruby === '') return 'ruby';
+  if (attrObj.amber || attrObj.amber === '') return 'amber';
+  if (attrObj.slate || attrObj.slate === '') return 'slate';
+  if (attrObj.green || attrObj.green === '') return 'green';
+  if (attrObj.teal || attrObj.teal === '') return 'teal';
   return 'blue'; // Default color
 });
 
 const computedSize = computed(() => {
   if (props.size) return props.size;
-  if (attrs.xs || attrs.xs === '') return 'xs';
-  if (attrs.sm || attrs.sm === '') return 'sm';
-  if (attrs.md || attrs.md === '') return 'md';
-  if (attrs.lg || attrs.lg === '') return 'lg';
+  // Add defensive checks for undefined attrs
+  const attrObj = attrs || {};
+  if (attrObj.xs || attrObj.xs === '') return 'xs';
+  if (attrObj.sm || attrObj.sm === '') return 'sm';
+  if (attrObj.md || attrObj.md === '') return 'md';
+  if (attrObj.lg || attrObj.lg === '') return 'lg';
   return 'md';
 });
 
 const computedJustify = computed(() => {
   if (props.justify) return props.justify;
-  if (attrs.start || attrs.start === '') return 'start';
-  if (attrs.center || attrs.center === '') return 'center';
-  if (attrs.end || attrs.end === '') return 'end';
+  // Add defensive checks for undefined attrs
+  const attrObj = attrs || {};
+  if (attrObj.start || attrObj.start === '') return 'start';
+  if (attrObj.center || attrObj.center === '') return 'center';
+  if (attrObj.end || attrObj.end === '') return 'end';
 
   return 'center';
 });
@@ -141,6 +150,17 @@ const STYLE_CONFIG = {
       ghost:
         'text-n-slate-12 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
     },
+    green: {
+      solid:
+        'bg-green-600 text-white hover:enabled:bg-green-700 focus-visible:bg-green-700 outline-transparent',
+      faded:
+        'bg-green-600/10 text-green-700 hover:enabled:bg-green-600/20 focus-visible:bg-green-600/20 outline-transparent',
+      outline:
+        'text-green-700 hover:enabled:bg-green-600/10 focus-visible:bg-green-600/10 outline-green-600',
+      ghost:
+        'text-green-700 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-green-700 hover:enabled:underline focus-visible:underline outline-transparent',
+    },
     teal: {
       solid:
         'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 focus-visible:bg-n-teal-10 outline-transparent',

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -16,7 +16,9 @@ defineOptions({
 });
 
 const timeStampURL = computed(() => {
-  return timeStampAppendedURL(attachment.dataUrl);
+  // Safely access the URL, providing a fallback if not available
+  const url = attachment?.dataUrl || attachment?.data_url || '';
+  return timeStampAppendedURL(url);
 });
 
 const audioPlayer = useTemplateRef('audioPlayer');
@@ -91,8 +93,17 @@ const changePlaybackSpeed = () => {
 };
 
 const downloadAudio = async () => {
-  const { fileType, dataUrl, extension } = attachment;
-  downloadFile({ url: dataUrl, type: fileType, extension });
+  // Get the URL with fallback options
+  const url = attachment?.dataUrl || attachment?.data_url || '';
+  if (!url) {
+    console.error('No valid URL found for download');
+    return;
+  }
+
+  const fileType = attachment?.fileType || attachment?.file_type || 'file';
+  const extension = attachment?.extension || 'mp3';
+
+  downloadFile({ url, type: fileType, extension });
 };
 </script>