whatsappNucleo/app/components/messages/content/MessageContact.vue

<template>
  <div
    class="flex items-center gap-3 p-3 rounded-lg min-w-[200px] max-w-[280px]"
    :class="fromMe ? 'bg-white/10' : 'bg-[var(--wa-bg-light)]'"
  >
    <!-- Avatar placeholder -->
    <div
      class="w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0"
      :class="fromMe ? 'bg-white/20' : 'bg-[var(--wa-border)]'"
    >
      <UIcon
        name="i-lucide-user"
        class="w-6 h-6"
        :class="fromMe ? 'text-white' : 'text-[var(--wa-text-muted)]'"
      />
    </div>

    <!-- Contact info -->
    <div class="flex-1 min-w-0">
      <p
        class="font-medium truncate"
        :class="fromMe ? 'text-white' : 'text-[var(--wa-text)]'"
      >
        {{ contact.displayName }}
      </p>
      <p
        v-if="primaryPhone"
        class="text-sm mt-0.5 truncate"
        :class="fromMe ? 'text-white/70' : 'text-[var(--wa-text-muted)]'"
      >
        {{ primaryPhone }}
      </p>
    </div>
  </div>

  <!-- Action buttons -->
  <div
    class="flex gap-2 mt-2"
    :class="fromMe ? 'justify-end' : 'justify-start'"
  >
    <UButton
      size="xs"
      :variant="fromMe ? 'soft' : 'outline'"
      :class="fromMe ? 'text-white border-white/30' : ''"
      @click="viewContact"
    >
      <UIcon name="i-lucide-eye" class="w-3 h-3 mr-1" />
      Ver
    </UButton>
    <UButton
      v-if="primaryPhone"
      size="xs"
      :variant="fromMe ? 'soft' : 'outline'"
      :class="fromMe ? 'text-white border-white/30' : ''"
      @click="sendMessage"
    >
      <UIcon name="i-lucide-message-circle" class="w-3 h-3 mr-1" />
      Mensaje
    </UButton>
  </div>

  <!-- Contact details modal -->
  <UModal v-model:open="showDetails" :title="contact.displayName" description="Contacto compartido">
    <template #header>
      <div class="flex items-center gap-3">
        <div class="w-12 h-12 rounded-full bg-[var(--wa-green-light)] flex items-center justify-center">
          <UIcon name="i-lucide-user" class="w-6 h-6 text-white" />
        </div>
        <div>
          <h3 class="font-semibold text-lg">{{ contact.displayName }}</h3>
          <p class="text-sm text-[var(--wa-text-muted)]">Contacto compartido</p>
        </div>
      </div>
    </template>

    <template #body>
      <div class="space-y-3">
        <div v-for="(phone, i) in contact.phones" :key="i" class="flex items-center gap-3">
          <UIcon name="i-lucide-phone" class="w-5 h-5 text-[var(--wa-text-muted)]" />
          <a
            :href="`tel:${phone}`"
            class="text-[var(--wa-blue)] hover:underline"
          >
            {{ phone }}
          </a>
        </div>

        <div v-if="!contact.phones?.length" class="text-[var(--wa-text-muted)] text-sm">
          No hay números de teléfono disponibles
        </div>
      </div>
    </template>

    <template #footer>
      <UButton variant="ghost" @click="showDetails = false">
        Cerrar
      </UButton>
      <UButton v-if="primaryPhone" @click="copyPhone">
        <UIcon name="i-lucide-copy" class="w-4 h-4 mr-1" />
        Copiar número
      </UButton>
    </template>
  </UModal>
</template>

<script setup lang="ts">
import type { ContactInfo } from '~/types/message'

interface Props {
  contact: ContactInfo
  fromMe?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  fromMe: false
})

const showDetails = ref(false)
const toast = useToast()

const primaryPhone = computed(() => {
  if (props.contact.phones && props.contact.phones.length > 0) {
    return props.contact.phones[0]
  }
  return null
})

const viewContact = () => {
  showDetails.value = true
}

const sendMessage = () => {
  if (primaryPhone.value) {
    // Formatear número para WhatsApp
    const number = primaryPhone.value.replace(/\D/g, '')
    window.open(`https://wa.me/${number}`, '_blank')
  }
}

const copyPhone = async () => {
  if (primaryPhone.value) {
    await navigator.clipboard.writeText(primaryPhone.value)
    toast.add({
      title: 'Número copiado',
      icon: 'i-lucide-check',
      color: 'green'
    })
  }
}
</script>