@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/CategoryTree.vue

@@ -1,89 +1,89 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-    categories: { type: Array, default: () => [] },
-    level: { type: Number, default: 0 },
-    parentId: { type: [Number, null], default: null },
-});
-
-defineEmits(['edit', 'delete']);
-
-const children = computed(() => {
-    return props.categories.filter((c) => {
-        if (props.parentId === null) return !c.parent_id;
-        return c.parent_id === props.parentId;
-    });
-});
-</script>
-
-<template>
-    <div>
-        <div v-for="category in children" :key="category.id">
-            <div
-                :class="[
-                    'flex items-center justify-between rounded-lg border border-white/[0.06] bg-neutral-900/60 px-4 py-3 mb-1.5',
-                ]"
-                :style="{ marginLeft: level * 24 + 'px' }"
-            >
-                <div class="flex items-center gap-3">
-                    <svg
-                        class="h-4 w-4 text-neutral-600"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
-                        />
-                    </svg>
-                    <div>
-                        <span class="text-sm font-medium text-neutral-200">{{ category.name }}</span>
-                        <span v-if="category.articles_count !== undefined" class="ml-2 text-xs text-neutral-500">
-                            {{ category.articles_count }} articles
-                        </span>
-                    </div>
-                </div>
-                <div class="flex items-center gap-2">
-                    <span class="text-xs text-neutral-600">pos: {{ category.position }}</span>
-                    <button
-                        type="button"
-                        class="rounded p-1 text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300"
-                        @click="$emit('edit', category)"
-                    >
-                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-                            />
-                        </svg>
-                    </button>
-                    <button
-                        type="button"
-                        class="rounded p-1 text-neutral-500 hover:bg-red-500/10 hover:text-red-400"
-                        @click="$emit('delete', category)"
-                    >
-                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-                            />
-                        </svg>
-                    </button>
-                </div>
-            </div>
-            <CategoryTree
-                :categories="categories"
-                :level="level + 1"
-                :parent-id="category.id"
-                @edit="$emit('edit', $event)"
-                @delete="$emit('delete', $event)"
-            />
-        </div>
-    </div>
-</template>
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    categories: { type: Array, default: () => [] },
+    level: { type: Number, default: 0 },
+    parentId: { type: [Number, null], default: null },
+});
+
+defineEmits(['edit', 'delete']);
+
+const children = computed(() => {
+    return props.categories.filter((c) => {
+        if (props.parentId === null) return !c.parent_id;
+        return c.parent_id === props.parentId;
+    });
+});
+</script>
+
+<template>
+    <div>
+        <div v-for="category in children" :key="category.id">
+            <div
+                :class="[
+                    'flex items-center justify-between rounded-lg border border-white/[0.06] bg-neutral-900/60 px-4 py-3 mb-1.5',
+                ]"
+                :style="{ marginLeft: level * 24 + 'px' }"
+            >
+                <div class="flex items-center gap-3">
+                    <svg
+                        class="h-4 w-4 text-neutral-600"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+                        />
+                    </svg>
+                    <div>
+                        <span class="text-sm font-medium text-neutral-200">{{ category.name }}</span>
+                        <span v-if="category.articles_count !== undefined" class="ml-2 text-xs text-neutral-500">
+                            {{ category.articles_count }} articles
+                        </span>
+                    </div>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="text-xs text-neutral-600">pos: {{ category.position }}</span>
+                    <button
+                        type="button"
+                        class="rounded p-1 text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300"
+                        @click="$emit('edit', category)"
+                    >
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                            />
+                        </svg>
+                    </button>
+                    <button
+                        type="button"
+                        class="rounded p-1 text-neutral-500 hover:bg-red-500/10 hover:text-red-400"
+                        @click="$emit('delete', category)"
+                    >
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                            />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <CategoryTree
+                :categories="categories"
+                :level="level + 1"
+                :parent-id="category.id"
+                @edit="$emit('edit', $event)"
+                @delete="$emit('delete', $event)"
+            />
+        </div>
+    </div>
+</template>

package/src/components/ChartWidget.vue

@@ -1,46 +1,46 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-    title: { type: String, default: '' },
-    data: { type: Array, default: () => [] },
-    color: { type: String, default: 'cyan' },
-});
-
-const colorMap = {
-    cyan: 'bg-cyan-500',
-    violet: 'bg-violet-500',
-    emerald: 'bg-emerald-500',
-    amber: 'bg-amber-500',
-    red: 'bg-red-500',
-    blue: 'bg-blue-500',
-};
-
-const barColor = computed(() => colorMap[props.color] || colorMap.cyan);
-
-const maxValue = computed(() => {
-    if (!props.data.length) return 1;
-    return Math.max(...props.data.map((d) => d.value), 1);
-});
-</script>
-
-<template>
-    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-        <h3 v-if="title" class="mb-4 text-sm font-semibold text-neutral-200">{{ title }}</h3>
-        <div v-if="data.length" class="space-y-2.5">
-            <div v-for="item in data" :key="item.label" class="flex items-center gap-3">
-                <span class="w-20 shrink-0 truncate text-xs text-neutral-500">{{ item.label }}</span>
-                <div class="flex-1">
-                    <div class="h-5 overflow-hidden rounded-full bg-white/[0.04]">
-                        <div
-                            :class="['h-full rounded-full transition-all', barColor]"
-                            :style="{ width: `${(item.value / maxValue) * 100}%`, opacity: 0.8 }"
-                        ></div>
-                    </div>
-                </div>
-                <span class="w-10 text-right text-xs font-medium text-neutral-300">{{ item.value }}</span>
-            </div>
-        </div>
-        <div v-else class="py-6 text-center text-sm text-neutral-500">No data available</div>
-    </div>
-</template>
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    title: { type: String, default: '' },
+    data: { type: Array, default: () => [] },
+    color: { type: String, default: 'cyan' },
+});
+
+const colorMap = {
+    cyan: 'bg-cyan-500',
+    violet: 'bg-violet-500',
+    emerald: 'bg-emerald-500',
+    amber: 'bg-amber-500',
+    red: 'bg-red-500',
+    blue: 'bg-blue-500',
+};
+
+const barColor = computed(() => colorMap[props.color] || colorMap.cyan);
+
+const maxValue = computed(() => {
+    if (!props.data.length) return 1;
+    return Math.max(...props.data.map((d) => d.value), 1);
+});
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+        <h3 v-if="title" class="mb-4 text-sm font-semibold text-neutral-200">{{ title }}</h3>
+        <div v-if="data.length" class="space-y-2.5">
+            <div v-for="item in data" :key="item.label" class="flex items-center gap-3">
+                <span class="w-20 shrink-0 truncate text-xs text-neutral-500">{{ item.label }}</span>
+                <div class="flex-1">
+                    <div class="h-5 overflow-hidden rounded-full bg-white/[0.04]">
+                        <div
+                            :class="['h-full rounded-full transition-all', barColor]"
+                            :style="{ width: `${(item.value / maxValue) * 100}%`, opacity: 0.8 }"
+                        ></div>
+                    </div>
+                </div>
+                <span class="w-10 text-right text-xs font-medium text-neutral-300">{{ item.value }}</span>
+            </div>
+        </div>
+        <div v-else class="py-6 text-center text-sm text-neutral-500">No data available</div>
+    </div>
+</template>

package/src/components/ChatActionBar.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
+import { useI18n } from '../composables/useI18n';
+
+const props = defineProps({
+    sessionId: { type: [String, Number], default: null },
+    startedAt: { type: String, default: null },
+    customer: { type: Object, default: () => ({}) },
+    agents: { type: Array, default: () => [] },
+    departments: { type: Array, default: () => [] },
+    endEndpoint: { type: String, default: '' },
+    transferEndpoint: { type: String, default: '' },
+});
+
+const emit = defineEmits(['end-chat', 'transfer']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const { t } = useI18n();
+
+const showEndConfirm = ref(false);
+const showTransfer = ref(false);
+const elapsed = ref('0:00');
+let timerInterval = null;
+
+function updateTimer() {
+    if (!props.startedAt) return;
+    const diffMs = Date.now() - new Date(props.startedAt).getTime();
+    const totalSecs = Math.max(0, Math.floor(diffMs / 1000));
+    const mins = Math.floor(totalSecs / 60);
+    const secs = totalSecs % 60;
+    if (mins >= 60) {
+        const hrs = Math.floor(mins / 60);
+        const remMins = mins % 60;
+        elapsed.value = `${hrs}:${String(remMins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    } else {
+        elapsed.value = `${mins}:${String(secs).padStart(2, '0')}`;
+    }
+}
+
+onMounted(() => {
+    updateTimer();
+    timerInterval = setInterval(updateTimer, 1000);
+});
+
+onUnmounted(() => {
+    clearInterval(timerInterval);
+});
+
+async function confirmEndChat() {
+    emit('end-chat', props.sessionId);
+    if (props.endEndpoint) {
+        try {
+            await fetch(props.endEndpoint, {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+                },
+            });
+        } catch {
+            // handled by caller
+        }
+    }
+    showEndConfirm.value = false;
+}
+
+function transferTo(type, id) {
+    emit('transfer', { type, id });
+    if (props.transferEndpoint) {
+        fetch(props.transferEndpoint, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+            body: JSON.stringify({ type, id }),
+        }).catch(() => {});
+    }
+    showTransfer.value = false;
+}
+</script>
+
+<template>
+    <div
+        :class="[
+            'flex flex-wrap items-center gap-3 rounded-xl border px-4 py-3',
+            escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
+        ]"
+    >
+        <!-- Chat duration -->
+        <div class="flex items-center gap-2">
+            <span :class="['h-2 w-2 animate-pulse rounded-full bg-emerald-500']"></span>
+            <span :class="['text-sm font-mono font-medium', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                {{ elapsed }}
+            </span>
+            <span :class="['text-xs', escDark ? 'text-neutral-600' : 'text-gray-400']">
+                {{ t('chat.live') }}
+            </span>
+        </div>
+
+        <!-- Customer info -->
+        <div
+            v-if="customer.name || customer.email"
+            :class="['flex items-center gap-2 text-xs', escDark ? 'text-neutral-500' : 'text-gray-500']"
+        >
+            <span v-if="customer.name">{{ customer.name }}</span>
+            <span v-if="customer.email" class="hidden sm:inline">&middot; {{ customer.email }}</span>
+            <span v-if="customer.page_url" class="hidden md:inline truncate max-w-[200px]"
+                >&middot; {{ customer.page_url }}</span
+            >
+        </div>
+
+        <div class="ml-auto flex items-center gap-2">
+            <!-- Transfer -->
+            <div class="relative">
+                <button
+                    :class="[
+                        'rounded-lg border px-3 py-1.5 text-sm transition-colors',
+                        escDark
+                            ? 'border-white/10 text-neutral-400 hover:border-white/20 hover:text-neutral-200'
+                            : 'border-gray-300 text-gray-600 hover:border-gray-400 hover:text-gray-800',
+                    ]"
+                    @click="showTransfer = !showTransfer"
+                >
+                    {{ t('chat.transfer') }}
+                </button>
+                <div
+                    v-if="showTransfer"
+                    :class="[
+                        'absolute right-0 top-full z-50 mt-1 w-56 rounded-lg border py-1 shadow-xl',
+                        escDark ? 'border-white/[0.08] bg-neutral-800' : 'border-gray-200 bg-white',
+                    ]"
+                >
+                    <div
+                        v-if="agents.length"
+                        :class="[
+                            'px-3 py-1 text-[10px] font-semibold uppercase',
+                            escDark ? 'text-neutral-600' : 'text-gray-400',
+                        ]"
+                    >
+                        {{ t('chat.agents') }}
+                    </div>
+                    <button
+                        v-for="agent in agents"
+                        :key="'a-' + agent.id"
+                        :class="[
+                            'block w-full px-3 py-1.5 text-left text-sm',
+                            escDark ? 'text-neutral-300 hover:bg-white/[0.06]' : 'text-gray-700 hover:bg-gray-50',
+                        ]"
+                        @click="transferTo('agent', agent.id)"
+                    >
+                        {{ agent.name }}
+                    </button>
+                    <div
+                        v-if="departments.length"
+                        :class="[
+                            'mt-1 border-t px-3 py-1 text-[10px] font-semibold uppercase',
+                            escDark ? 'border-white/[0.06] text-neutral-600' : 'border-gray-100 text-gray-400',
+                        ]"
+                    >
+                        {{ t('chat.departments') }}
+                    </div>
+                    <button
+                        v-for="dept in departments"
+                        :key="'d-' + dept.id"
+                        :class="[
+                            'block w-full px-3 py-1.5 text-left text-sm',
+                            escDark ? 'text-neutral-300 hover:bg-white/[0.06]' : 'text-gray-700 hover:bg-gray-50',
+                        ]"
+                        @click="transferTo('department', dept.id)"
+                    >
+                        {{ dept.name }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- End Chat -->
+            <div class="relative">
+                <button
+                    v-if="!showEndConfirm"
+                    :class="[
+                        'rounded-lg border px-3 py-1.5 text-sm transition-colors',
+                        escDark
+                            ? 'border-rose-500/20 text-rose-400 hover:bg-rose-500/10'
+                            : 'border-red-200 text-red-600 hover:bg-red-50',
+                    ]"
+                    @click="showEndConfirm = true"
+                >
+                    {{ t('chat.end_chat') }}
+                </button>
+                <div v-else class="flex items-center gap-2">
+                    <span :class="['text-xs', escDark ? 'text-neutral-400' : 'text-gray-500']">
+                        {{ t('chat.end_confirm') }}
+                    </span>
+                    <button
+                        :class="[
+                            'rounded-lg px-3 py-1.5 text-sm font-medium text-white',
+                            escDark ? 'bg-rose-600 hover:bg-rose-500' : 'bg-red-600 hover:bg-red-500',
+                        ]"
+                        @click="confirmEndChat"
+                    >
+                        {{ t('form.confirm') }}
+                    </button>
+                    <button
+                        :class="[
+                            'rounded-lg border px-3 py-1.5 text-sm',
+                            escDark
+                                ? 'border-white/10 text-neutral-400 hover:text-neutral-200'
+                                : 'border-gray-300 text-gray-500 hover:text-gray-700',
+                        ]"
+                        @click="showEndConfirm = false"
+                    >
+                        {{ t('form.cancel') }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/ChatBubble.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { computed, inject } from 'vue';
+import { timeAgo } from '../utils/formatting';
+import { highlightMentions } from '../utils/mentionHighlight';
+import { sanitizeHtml } from '../utils/sanitizeHtml';
+
+const props = defineProps({
+    message: { type: Object, required: true },
+    isAgent: { type: Boolean, default: false },
+    showAvatar: { type: Boolean, default: true },
+    showTimestamp: { type: Boolean, default: false },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+function attachmentUrl(att) {
+    if (att.url) return att.url;
+    if (typeof window.route === 'function') {
+        try {
+            return window.route('escalated.attachments.download', att.id);
+        } catch {
+            // route not registered
+        }
+    }
+    return `/escalated/attachments/${att.id}/download`;
+}
+
+const initials = computed(() => {
+    const name = props.message.author?.name || 'U';
+    return name
+        .split(' ')
+        .map((w) => w[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+});
+
+const formattedTime = computed(() => {
+    if (!props.message.created_at) return '';
+    const date = new Date(props.message.created_at);
+    const diffMs = Date.now() - date.getTime();
+    // If less than 24h, show relative; otherwise show absolute
+    if (diffMs < 86400000) {
+        return timeAgo(props.message.created_at);
+    }
+    return date.toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+});
+
+const isInternalNote = computed(() => props.message.is_internal_note);
+</script>
+
+<template>
+    <div
+        :class="[
+            'flex gap-2',
+            isAgent ? 'flex-row-reverse' : 'flex-row',
+            !showAvatar && isAgent ? 'pr-10' : '',
+            !showAvatar && !isAgent ? 'pl-10' : '',
+        ]"
+        :data-message-id="message.id"
+    >
+        <!-- Avatar -->
+        <div v-if="showAvatar" class="flex-shrink-0">
+            <div v-if="message.author?.avatar" class="h-8 w-8 overflow-hidden rounded-full">
+                <img :src="message.author.avatar" :alt="message.author.name" class="h-full w-full object-cover" />
+            </div>
+            <div
+                v-else
+                :class="[
+                    'flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold',
+                    isAgent
+                        ? escDark
+                            ? 'bg-cyan-500/20 text-cyan-400'
+                            : 'bg-blue-100 text-blue-700'
+                        : escDark
+                          ? 'bg-neutral-700 text-neutral-300'
+                          : 'bg-gray-200 text-gray-600',
+                ]"
+            >
+                {{ initials }}
+            </div>
+        </div>
+
+        <!-- Bubble -->
+        <div class="max-w-[75%]">
+            <div
+                :class="[
+                    'rounded-2xl px-4 py-2 text-sm',
+                    isInternalNote
+                        ? escDark
+                            ? 'bg-amber-500/10 text-amber-300 ring-1 ring-amber-500/20'
+                            : 'bg-yellow-50 text-yellow-800 ring-1 ring-yellow-200'
+                        : isAgent
+                          ? escDark
+                              ? 'bg-cyan-500/15 text-neutral-200'
+                              : 'bg-blue-600 text-white'
+                          : escDark
+                            ? 'bg-neutral-800 text-neutral-200'
+                            : 'bg-gray-100 text-gray-900',
+                ]"
+            >
+                <span v-if="isInternalNote" class="mb-1 block text-[10px] font-semibold uppercase opacity-70">
+                    Internal Note
+                </span>
+                <p
+                    class="whitespace-pre-wrap break-words"
+                    v-html="highlightMentions(sanitizeHtml(message.body || ''), escDark)"
+                ></p>
+
+                <!-- Attachments -->
+                <div v-if="message.attachments?.length" class="mt-2 space-y-1">
+                    <a
+                        v-for="att in message.attachments"
+                        :key="att.id || att.url"
+                        :href="attachmentUrl(att)"
+                        target="_blank"
+                        rel="noopener"
+                        :class="[
+                            'flex items-center gap-1 text-xs underline',
+                            isAgent && !isInternalNote
+                                ? escDark
+                                    ? 'text-cyan-300'
+                                    : 'text-blue-200'
+                                : escDark
+                                  ? 'text-cyan-400'
+                                  : 'text-blue-600',
+                        ]"
+                    >
+                        <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
+                            />
+                        </svg>
+                        {{ att.name || 'Attachment' }}
+                    </a>
+                </div>
+            </div>
+
+            <!-- Timestamp -->
+            <div
+                v-if="showTimestamp"
+                :class="[
+                    'mt-1 text-[10px]',
+                    isAgent ? 'text-right' : 'text-left',
+                    escDark ? 'text-neutral-600' : 'text-gray-400',
+                ]"
+            >
+                {{ formattedTime }}
+            </div>
+        </div>
+    </div>
+</template>