@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/chat/AppChatBubble.vue

@@ -0,0 +1,324 @@
+<script setup>
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { renderChatMarkup } from '@initsolusidigital/worksuite-core/utils/chatMarkup.js'
+import { useCrossAppLink } from '@initsolusidigital/worksuite-core/composables/useCrossAppLink.js'
+import { companyFilesApi } from '@initsolusidigital/worksuite-core/api/endpoints/companyFiles.js'
+import { FileText, Download, MapPin, ExternalLink, ImageOff, X } from '@lucide/vue'
+
+// Isi satu bubble chat — lima tipe: `text` · `image` · `file` · `location` · `entity`.
+//
+// Dipisah dari `AppChatPanel` supaya panel tetap terbaca: lima tipe dengan aturan render
+// masing-masing tak muat jadi rentetan `v-if` di tengah daftar pesan.
+const props = defineProps({
+  msg: { type: Object, required: true },
+  mine: { type: Boolean, default: false },
+})
+
+const { t } = useI18n()
+const { openTarget } = useCrossAppLink()
+
+const meta = computed(() => props.msg?.meta ?? {})
+const tipe = computed(() => props.msg?.type || 'text')
+
+/**
+ * ⚠️ `file_url` DERIVED per respons, bukan tersimpan. `null` + `meta.name` ada berarti berkasnya
+ * sudah dihapus (mis. lewat sapu massal File Manager) — **pesannya TIDAK ikut hilang**.
+ * Yang ditampilkan: "lampiran telah dihapus: {nama}", memakai nama dari SNAPSHOT `meta`.
+ */
+const terhapus = computed(() => !props.msg?.file_url && !!meta.value.name)
+
+/** Satu-satunya HTML yang boleh masuk `v-html` — keluaran `renderChatMarkup()`, escape-dulu-baru-dekorasi. */
+const bodyHtml = computed(() => renderChatMarkup(props.msg?.body || ''))
+
+const ukuran = (n) => {
+  const b = Number(n) || 0
+  if (!b) return ''
+  if (b < 1024) return `${b} B`
+  const u = ['KB', 'MB', 'GB']
+  let v = b / 1024, i = 0
+  while (v >= 1024 && i < u.length - 1) { v /= 1024; i++ }
+  return `${v.toFixed(v >= 100 ? 0 : 1)} ${u[i]}`
+}
+
+// ── Peta lokasi: Leaflet + OSM, dimuat MALAS ────────────────────────────────────────────────
+// Peta hanya dirakit saat bubble-nya benar-benar terlihat: satu percakapan bisa memuat puluhan
+// pesan lokasi, dan menyiapkan puluhan instance peta sekaligus membuat panel tersendat.
+const petaEl = ref(null)
+let peta = null
+let io = null
+
+async function pasangPeta() {
+  if (peta || !petaEl.value) return
+  const L = (await import('leaflet')).default
+  await import('leaflet/dist/leaflet.css')
+  const { lat, lng } = meta.value
+  peta = L.map(petaEl.value, {
+    center: [Number(lat), Number(lng)],
+    zoom: 15,
+    // Bubble di dalam daftar yang bergulir: peta yang bisa di-zoom/geser akan merebut gulungan.
+    zoomControl: false, dragging: false, scrollWheelZoom: false, doubleClickZoom: false,
+    keyboard: false, touchZoom: false, attributionControl: true,
+  })
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; OpenStreetMap',
+  }).addTo(peta)
+  L.marker([Number(lat), Number(lng)]).addTo(peta)
+}
+
+onMounted(() => {
+  if (tipe.value !== 'location' || !petaEl.value) return
+  io = new IntersectionObserver((entries) => {
+    if (entries.some((e) => e.isIntersecting)) { pasangPeta(); io?.disconnect(); io = null }
+  })
+  io.observe(petaEl.value)
+})
+onBeforeUnmount(() => { io?.disconnect(); peta?.remove?.(); peta = null })
+
+// ── Lightbox gambar ─────────────────────────────────────────────────────────────────────────
+// Klik gambar dulu membuka TAB BARU — di situ gambarnya berdiri sendiri tanpa konteks, dan
+// menutupnya berarti meninggalkan percakapan. Lightbox menahannya di tempat & menyediakan unduh.
+const lightbox = ref(false)
+
+function tutupLightbox() { lightbox.value = false }
+function onKeydownLightbox(e) { if (e.key === 'Escape') tutupLightbox() }
+
+watch(lightbox, (buka) => {
+  // Escape ditangani di window, bukan pada elemennya: elemen lightbox belum tentu memegang fokus
+  // (user baru saja mengklik gambar di dalam daftar yang bergulir).
+  if (buka) window.addEventListener('keydown', onKeydownLightbox)
+  else window.removeEventListener('keydown', onKeydownLightbox)
+})
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydownLightbox))
+
+/**
+ * Unduh gambar dengan NAMA ASLI, tanpa meninggalkan percakapan.
+ *
+ * ⚠️ Atribut `download` pada `<a>` **DIABAIKAN browser untuk URL lintas-origin** — berkas disajikan
+ * dari `:8000` sementara aplikasi di `:5173`, jadi tombolnya cuma menavigasi ke gambarnya dan nama
+ * yang muncul di dialog Simpan adalah nama STORAGE (`nyos-kitchen-logo-6a698….png`), bukan nama
+ * yang diunggah user.
+ *
+ * Jalur yang benar: ambil sebagai blob lalu simpan dengan nama dari snapshot `meta`. ⚠️ Itu menuntut
+ * CORS pada berkasnya, dan **`/storage` TIDAK melewati middleware CORS** (jebakan yang sama dengan
+ * `document-print.css` dulu) — terukur: `fetch` dari origin aplikasi gagal `TypeError: Failed to
+ * fetch`. Jadi jalur ini baru benar-benar hidup setelah backend menyediakan rute unduh ber-
+ * `Content-Disposition`.
+ *
+ * Sampai itu ada: kita TETAP mencoba blob (kalau kelak berkas satu origin dgn aplikasi, ia langsung
+ * bekerja tanpa mengubah kode), lalu jatuh ke membuka tab baru — bukan menavigasi tab yang sedang
+ * dipakai, supaya percakapannya tidak hilang.
+ */
+const mengunduh = ref(false)
+
+/**
+ * Alamat unduh — rute API ber-`Content-Disposition`, BUKAN `file_url`.
+ *
+ * `file_url` menunjuk `/storage` yang tak melewati CORS & mengabaikan atribut `download`; rute ini
+ * melayani nama ASLI dari kolom `name` sehingga dialog Simpan menampilkan nama yang diunggah user,
+ * bukan nama simpan di disk yang memang opak (`{uuid}.png`).
+ */
+const unduhUrl = computed(() => (meta.value.file_id ? companyFilesApi.downloadUrl(meta.value.file_id) : ''))
+
+/**
+ * Berkas ini bisa diambil sebagai blob?
+ *
+ * Bukan tebakan: **`/storage` tak pernah melewati middleware CORS**, sedangkan rute di bawah
+ * `/api/` melewatinya. Menyaring di sini bukan optimasi melainkan soal kejujuran keluaran — tanpa
+ * ini, tiap klik "Unduh" mencetak error CORS merah di konsol padahal fallback-nya bekerja normal,
+ * dan konsol yang penuh error palsu membuat error SUNGGUHAN berikutnya tak terlihat.
+ */
+function bisaBlob(url) {
+  try {
+    const u = new URL(url, window.location.href)
+    return u.origin === window.location.origin || u.pathname.startsWith('/api/')
+  } catch {
+    return false
+  }
+}
+
+async function unduhGambar() {
+  if (mengunduh.value) return
+  mengunduh.value = true
+  const nama = meta.value.name || t('chat.openImage')
+  try {
+    const alamat = unduhUrl.value || props.msg.file_url
+    if (!bisaBlob(alamat)) throw new Error('cors_tertutup')
+    const res = await fetch(alamat, { credentials: 'include' })
+    if (!res.ok) throw new Error(String(res.status))
+    const blob = await res.blob()
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = nama
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+    URL.revokeObjectURL(url)
+  } catch {
+    // Jatuh ke tab baru — jujur & tak merusak apa pun. `noopener` wajib: tanpa itu halaman yang
+    // dibuka bisa menyentuh `window.opener`.
+    window.open(unduhUrl.value || props.msg.file_url, '_blank', 'noopener')
+  } finally {
+    mengunduh.value = false
+  }
+}
+
+const petaUrl = computed(() => {
+  const { lat, lng } = meta.value
+  return `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}#map=16/${lat}/${lng}`
+})
+</script>
+
+<template>
+  <div class="space-y-1.5" :data-msg-type="tipe">
+    <!-- ── Lampiran GAMBAR ───────────────────────────────────────────────────────────────── -->
+    <template v-if="tipe === 'image'">
+      <div v-if="terhapus" class="flex items-center gap-2 text-xs italic opacity-80" data-attachment-gone>
+        <ImageOff class="w-4 h-4 shrink-0" />
+        <span>{{ t('chat.attachmentGone', { name: meta.name }) }}</span>
+      </div>
+      <button v-else type="button" class="block" data-image-open :aria-label="meta.name || t('chat.openImage')" @click="lightbox = true">
+        <!-- ⚠️ Klik-kanan sengaja dimatikan. Ini **penghalang, bukan
+             perlindungan**: alamat berkasnya tetap ada di DOM dan tetap bisa diambil siapa pun yang
+             membuka devtools. Gunanya mencegah penyimpanan TIDAK SENGAJA lewat menu browser yang
+             melewati jalur unduh kita (& namanya jadi nama storage) — bukan mengamankan gambar.
+             `-webkit-touch-callout` mematikan padanannya di iOS (tekan-lama). -->
+        <img
+          :src="msg.file_url"
+          :alt="meta.name || ''"
+          class="rounded-lg max-w-full max-h-64 object-cover select-none [-webkit-touch-callout:none]"
+          loading="lazy"
+          draggable="false"
+          @contextmenu.prevent
+        />
+      </button>
+    </template>
+
+    <!-- ── Lampiran BERKAS ───────────────────────────────────────────────────────────────── -->
+    <template v-else-if="tipe === 'file'">
+      <div v-if="terhapus" class="flex items-center gap-2 text-xs italic opacity-80" data-attachment-gone>
+        <FileText class="w-4 h-4 shrink-0" />
+        <span>{{ t('chat.attachmentGone', { name: meta.name }) }}</span>
+      </div>
+      <!-- ⚠️ Menunjuk rute UNDUH, bukan `file_url`: `Content-Disposition: attachment` membuat klik
+           langsung menyimpan berkas dengan nama ASLI, tanpa membuka tab & tanpa memperlihatkan nama
+           simpan yang opak. `target="_blank"` sengaja DILEPAS — dengan header itu, tab baru cuma
+           berkedip lalu tertutup sendiri. -->
+      <a
+        v-else
+        :href="unduhUrl || msg.file_url"
+        rel="noopener"
+        class="flex items-center gap-2.5 rounded-lg px-2.5 py-2 bg-black/5 dark:bg-white/10 hover:bg-black/10 dark:hover:bg-white/20"
+        data-file-bubble
+      >
+        <FileText class="w-5 h-5 shrink-0 opacity-70" />
+        <span class="min-w-0 flex-1">
+          <span class="block truncate text-sm">{{ meta.name }}</span>
+          <span class="block text-[11px] opacity-70">{{ ukuran(meta.size) }}</span>
+        </span>
+        <Download class="w-4 h-4 shrink-0 opacity-70" />
+      </a>
+    </template>
+
+    <!-- ── LOKASI ────────────────────────────────────────────────────────────────────────── -->
+    <template v-else-if="tipe === 'location'">
+      <!-- ⚠️ `isolation: isolate` WAJIB. Leaflet memasang z-index internal sampai ~1000 pada
+           pane & kontrolnya; tanpa stacking context sendiri, angka itu bocor ke konteks panel dan
+           MENUTUPI menu lampir di komposer (menunya tergambar di balik peta). Isolasi menahan seluruh angka itu di dalam kotak petanya sendiri. -->
+      <!-- Kartu peta sengaja NETRAL (abu), tidak ikut warna bubble: peta itu sendiri penuh warna,
+           dan menaruhnya di atas biru membuat baris koordinat menyatu dengan latar sampai nyaris
+           tak terbaca. Kartu abu memberi peta bingkainya sendiri. -->
+      <div
+        class="rounded-lg overflow-hidden isolate relative z-0 bg-white dark:bg-gray-800 border border-black/5 dark:border-white/10"
+        data-location-bubble
+      >
+        <div ref="petaEl" class="h-36 w-56 bg-gray-100 dark:bg-gray-700" />
+        <a
+          :href="petaUrl"
+          target="_blank"
+          rel="noopener"
+          class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:underline"
+        >
+          <MapPin class="w-3.5 h-3.5 shrink-0 text-gray-400" />
+          <span class="truncate">{{ meta.label || `${meta.lat}, ${meta.lng}` }}</span>
+        </a>
+      </div>
+    </template>
+
+    <!-- ── KARTU ENTITAS (lintas-app) ────────────────────────────────────────────────────── -->
+    <template v-else-if="tipe === 'entity'">
+      <!-- Kartu = SNAPSHOT teks. Kliknya menempuh gerbang modul/seat normal di app tujuan, jadi
+           tak ada yang bocor: yang tak berhak melihat isinya tetap tak bisa membukanya. -->
+      <button
+        type="button"
+        class="w-full text-left rounded-lg px-3 py-2 bg-black/5 dark:bg-white/10 hover:bg-black/10 dark:hover:bg-white/20"
+        data-entity-card
+        @click="openTarget(meta)"
+      >
+        <span class="flex items-start gap-2">
+          <span class="min-w-0 flex-1">
+            <span class="block text-sm font-medium truncate">{{ meta.title }}</span>
+            <span v-if="meta.subtitle" class="block text-xs opacity-70 truncate">{{ meta.subtitle }}</span>
+            <span v-if="meta.amount" class="block text-xs font-semibold mt-0.5">{{ meta.amount }}</span>
+          </span>
+          <ExternalLink v-if="meta.target_app && meta.target_path" class="w-4 h-4 shrink-0 opacity-60" />
+        </span>
+      </button>
+    </template>
+
+    <!-- Caption / teks biasa — SELALU lewat sanitizer, tak pernah `v-html` mentah. -->
+    <p v-if="msg.body" class="whitespace-pre-wrap chat-markup" v-html="bodyHtml" />
+
+    <!-- Lightbox: ditempel ke <body> dgn z di ATAS widget chat (widget z-46, `AppModal` z-50) —
+         kalau tidak, ia tergambar DI BALIK panel yang memunculkannya. -->
+    <Teleport v-if="lightbox" to="body">
+      <div class="fixed inset-0 z-[80] bg-black/80 flex flex-col" data-lightbox @click.self="tutupLightbox">
+        <div class="flex items-center justify-between gap-3 px-4 py-3 text-white/90 shrink-0">
+          <span class="text-sm truncate">{{ meta.name || '' }}</span>
+          <div class="flex items-center gap-2 shrink-0">
+            <!-- `download` memakai nama ASLI dari snapshot meta, bukan nama acak di storage. -->
+            <button
+              type="button"
+              class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm bg-white/15 hover:bg-white/25 disabled:opacity-60"
+              :disabled="mengunduh"
+              data-lightbox-download
+              @click="unduhGambar"
+            >
+              <Download class="w-4 h-4" />{{ t('chat.download') }}
+            </button>
+            <button
+              type="button"
+              class="w-9 h-9 rounded-lg bg-white/15 hover:bg-white/25 flex items-center justify-center"
+              :aria-label="t('common.close')"
+              data-lightbox-close
+              @click="tutupLightbox"
+            ><X class="w-4 h-4" /></button>
+          </div>
+        </div>
+        <div class="flex-1 min-h-0 flex items-center justify-center p-4" @click.self="tutupLightbox">
+          <img
+            :src="msg.file_url"
+            :alt="meta.name || ''"
+            class="max-w-full max-h-full object-contain rounded select-none [-webkit-touch-callout:none]"
+            draggable="false"
+            data-lightbox-image
+            @contextmenu.prevent
+          />
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.chat-markup :deep(code) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+  padding: 0 0.25em;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.08);
+}
+:global(.dark) .chat-markup :deep(code) { background: rgba(255, 255, 255, 0.15); }
+</style>

package/src/components/chat/AppChatList.vue

@@ -0,0 +1,249 @@
+<script setup>
+// Isi popup chat saat view = 'list': header + daftar percakapan + form "Mulai Percakapan".
+import { ref, computed } from 'vue'
+import { Plus, ArrowLeft, Loader2, MessageSquareText, Send } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
+import { useChat } from '@initsolusidigital/worksuite-core/composables/useChat.js'
+import { stripChatMarkup } from '@initsolusidigital/worksuite-core/utils/chatMarkup.js'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { usersApi } from '@initsolusidigital/worksuite-core/api/endpoints/users.js'
+import AppCombobox from '@initsolusidigital/worksuite-ui/AppCombobox.vue'
+
+const { t, locale } = useI18n()
+const authStore = useAuthStore()
+const {
+  conversations, loadingList, hasMoreConversations,
+  fetchConversations, fetchMoreConversations, openConversation, startConversation,
+  otherUser, displayName,
+} = useChat()
+
+// ── Form "Mulai Percakapan" ────────────────────────────────────────────────────
+const showPicker = ref(false)
+const userOptions = ref([])
+const loadingUsers = ref(false)
+const selectedUserId = ref(null)
+const firstMessage = ref('')
+const starting = ref(false)
+
+async function openPicker() {
+  showPicker.value = true
+  selectedUserId.value = null
+  firstMessage.value = ''
+  if (userOptions.value.length) return
+  loadingUsers.value = true
+  try {
+    // Company sendiri otomatis (self-scoped) — buang diri sendiri dari opsi
+    const { data } = await usersApi.getList()
+    const rows = data.data?.data ?? data.data ?? []
+    userOptions.value = rows
+      .filter((u) => u.id !== authStore.user?.id)
+      .map((u) => ({
+        value: u.id,
+        label: [u.first_name, u.last_name].filter(Boolean).join(' '),
+        // /get_users belum kirim avatar — dipasang best-effort (fallback inisial di bawah)
+        // supaya otomatis kepakai kalau field ini ditambahkan backend nanti, tanpa perlu ubah UI lagi
+        avatar: u.avatar ?? null,
+      }))
+      // Urut A→Z — daftar bisa ratusan user; backend mengirim urut insert
+      .sort((a, b) => a.label.localeCompare(b.label, 'id', { sensitivity: 'base' }))
+  } catch {
+    userOptions.value = []
+  } finally {
+    loadingUsers.value = false
+  }
+}
+
+async function submitStart() {
+  if (!selectedUserId.value || starting.value) return
+  starting.value = true
+  try {
+    await startConversation(selectedUserId.value, firstMessage.value.trim() || undefined)
+    showPicker.value = false
+  } finally {
+    starting.value = false
+  }
+}
+
+// ── Formatting ──────────────────────────────────────────────────────────────────
+/**
+ * Pratinjau pesan terakhir.
+ *
+ * ⚠️ Penanda styling DIBUANG di sini, bukan dirender: pratinjau satu baris tak punya tempat untuk
+ * tebal/miring, dan membiarkannya mentah membuat daftar dipenuhi `*bintang*`. Dekorasi milik
+ * bubble, teks polos milik pratinjau.
+ *
+ * ⚠️ Pesan LAMPIRAN sering tanpa `body` (caption opsional) — tanpa cabang ini barisnya kosong dan
+ * percakapan tampak seperti tak berisi apa-apa. Kalimatnya dirakit dari `type`, bukan dari body
+ * backend.
+ */
+function snippet(conv) {
+  const last = conv.last_message
+  const body = String(last?.body ?? '')
+  const polos = stripChatMarkup(body)
+  if (polos.trim()) return polos.length > 80 ? polos.slice(0, 80) + '…' : polos
+  const meta = last?.meta ?? {}
+  return {
+    image: t('chat.preview_image'),
+    file: t('chat.preview_file', { name: meta.name || '' }),
+    location: t('chat.preview_location'),
+    entity: t('chat.preview_entity', { title: meta.title || '' }),
+  }[last?.type] ?? ''
+}
+
+function relativeTime(iso) {
+  if (!iso) return ''
+  const then = new Date(iso).getTime()
+  const diff = Math.max(0, Date.now() - then)
+  const min = Math.floor(diff / 60000)
+  if (min < 1) return t('chat.time.now')
+  if (min < 60) return t('chat.time.minutes', { n: min })
+  const hr = Math.floor(min / 60)
+  if (hr < 24) return t('chat.time.hours', { n: hr })
+  const day = Math.floor(hr / 24)
+  if (day < 7) return t('chat.time.days', { n: day })
+  return new Date(iso).toLocaleDateString(locale.value === 'id' ? 'id-ID' : 'en-US', {
+    day: 'numeric',
+    month: 'short',
+  })
+}
+
+function initials(user) {
+  const name = displayName(user)
+  return name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase()).filter(Boolean).join('') || '?'
+}
+
+// Sama seperti initials() tapi dari string label langsung — dipakai opsi picker "Mulai
+// Percakapan" (userOptions cuma {value, label, avatar}, bukan objek user dari useChat)
+function initialsFromLabel(label) {
+  return (label || '').split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase()).filter(Boolean).join('') || '?'
+}
+
+const headerTitle = computed(() => (showPicker.value ? t('chat.newConversation') : t('chat.title')))
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Header -->
+    <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex items-center gap-2 bg-gray-50/60 dark:bg-gray-700/40 shrink-0">
+      <button
+        v-if="showPicker"
+        @click="showPicker = false"
+        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+        :aria-label="t('common.back')"
+      >
+        <ArrowLeft class="w-4 h-4" />
+      </button>
+      <h3 class="text-sm font-semibold text-gray-800 dark:text-white flex-1 truncate">{{ headerTitle }}</h3>
+      <button
+        v-if="!showPicker"
+        @click="openPicker"
+        class="inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline"
+      >
+        <Plus class="w-3.5 h-3.5" /> {{ t('chat.start') }}
+      </button>
+    </div>
+
+    <!-- Form mulai percakapan -->
+    <div v-if="showPicker" class="flex-1 overflow-y-auto scrollbar-rounded p-4 flex flex-col gap-3">
+      <div>
+        <label class="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">{{ t('chat.recipient') }}</label>
+        <div v-if="loadingUsers" class="flex items-center gap-2 text-xs text-gray-400 py-2">
+          <Loader2 class="w-4 h-4 animate-spin" /> {{ t('common.loading') }}
+        </div>
+        <AppCombobox
+          v-else
+          v-model="selectedUserId"
+          :options="userOptions"
+          :aria-label="t('chat.recipient')"
+          :placeholder="t('chat.recipientPlaceholder')"
+          option-label="label"
+        >
+          <template #option-icon="{ option }">
+            <span class="inline-flex w-6 h-6 rounded-full overflow-hidden shrink-0 bg-blue-100 dark:bg-blue-900/40 items-center justify-center">
+              <img v-if="option.avatar" :src="option.avatar" class="w-full h-full object-cover" alt="" />
+              <span v-else class="text-[10px] font-semibold text-blue-700 dark:text-blue-300">{{ initialsFromLabel(option.label) }}</span>
+            </span>
+          </template>
+        </AppCombobox>
+      </div>
+      <div>
+        <label class="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">{{ t('chat.firstMessage') }}</label>
+        <textarea
+          v-model="firstMessage"
+          rows="3"
+          :placeholder="t('chat.placeholder')"
+          maxlength="5000"
+          class="w-full text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none scrollbar-rounded"
+        />
+      </div>
+      <button
+        @click="submitStart"
+        :disabled="!selectedUserId || starting"
+        class="inline-flex items-center justify-center gap-2 w-full py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        <Loader2 v-if="starting" class="w-4 h-4 animate-spin" />
+        <Send v-else class="w-4 h-4" />
+        {{ t('chat.startButton') }}
+      </button>
+    </div>
+
+    <!-- Daftar percakapan -->
+    <div v-else class="flex-1 overflow-y-auto scrollbar-rounded">
+      <div v-if="loadingList && conversations.length === 0" class="flex items-center justify-center h-full py-12">
+        <Loader2 class="w-5 h-5 text-gray-300 dark:text-gray-600 animate-spin" />
+      </div>
+
+      <div v-else-if="conversations.length === 0" class="flex flex-col items-center justify-center h-full py-12 px-6 text-center">
+        <MessageSquareText class="w-12 h-12 text-gray-200 dark:text-gray-700 mb-3" :stroke-width="1.5" />
+        <p class="text-sm text-gray-400 dark:text-gray-500">{{ t('chat.empty') }}</p>
+        <button @click="openPicker" class="mt-3 text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline">
+          {{ t('chat.start') }}
+        </button>
+      </div>
+
+      <template v-else>
+        <button
+          v-for="conv in conversations"
+          :key="conv.id"
+          @click="openConversation(conv.id)"
+          class="w-full text-left px-3 py-3 border-b border-gray-50 dark:border-gray-800/60 flex items-center gap-3 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
+        >
+          <!-- Avatar lawan bicara -->
+          <div class="shrink-0 w-10 h-10 rounded-full overflow-hidden bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center">
+            <img
+              v-if="otherUser(conv)?.avatar"
+              :src="otherUser(conv).avatar"
+              class="w-full h-full object-cover"
+              alt=""
+            />
+            <span v-else class="text-xs font-semibold text-blue-700 dark:text-blue-300">{{ initials(otherUser(conv)) }}</span>
+          </div>
+          <!-- Nama + cuplikan -->
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between gap-2">
+              <p class="text-sm font-semibold text-gray-800 dark:text-white truncate">{{ displayName(otherUser(conv)) || t('chat.unknownUser') }}</p>
+              <span class="text-[11px] text-gray-300 dark:text-gray-600 shrink-0">{{ relativeTime(conv.last_message_at) }}</span>
+            </div>
+            <div class="flex items-center justify-between gap-2 mt-0.5">
+              <p class="text-xs text-gray-400 dark:text-gray-500 truncate">{{ snippet(conv) || '—' }}</p>
+              <span
+                v-if="conv.unread_count > 0"
+                class="shrink-0 min-w-[18px] h-[18px] px-1 rounded-full bg-blue-600 text-white text-[10px] font-bold flex items-center justify-center leading-none"
+              >{{ conv.unread_count > 9 ? '9+' : conv.unread_count }}</span>
+            </div>
+          </div>
+        </button>
+
+        <div v-if="hasMoreConversations" class="p-3 text-center">
+          <button
+            @click="fetchMoreConversations"
+            :disabled="loadingList"
+            class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50"
+          >
+            {{ loadingList ? t('common.loading') : t('chat.loadMore') }}
+          </button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>