@escalated-dev/escalated 0.6.0 → 0.7.1

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>

package/src/components/ChatComposer.vue

@@ -0,0 +1,308 @@
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { useI18n } from '../composables/useI18n';
+import MentionDropdown from './MentionDropdown.vue';
+import { useMentions } from '../composables/useMentions';
+
+const props = defineProps({
+    sessionId: { type: [String, Number], default: null },
+    disabled: { type: Boolean, default: false },
+    allowNotes: { type: Boolean, default: false },
+    allowAttachments: { type: Boolean, default: true },
+    sendEndpoint: { type: String, default: '' },
+    typingEndpoint: { type: String, default: '' },
+});
+
+const emit = defineEmits(['send', 'typing']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const { t } = useI18n();
+
+const body = ref('');
+const isNote = ref(false);
+const files = ref([]);
+const submitting = ref(false);
+const textareaRef = ref(null);
+const mentionDropdownRef = ref(null);
+
+const {
+    suggestions,
+    isActive: mentionActive,
+    loading: mentionLoading,
+    onTextChange,
+    insertMention,
+    close: closeMentions,
+} = useMentions();
+
+function onMentionInput() {
+    if (textareaRef.value) {
+        onTextChange(textareaRef.value, body.value);
+    }
+}
+
+function handleMentionSelect(agent) {
+    body.value = insertMention(body.value, agent);
+    textareaRef.value?.focus();
+}
+
+// Typing indicator: debounced POST every 3 seconds while typing
+let lastTypingSent = 0;
+let typingTimer = null;
+
+function onInput() {
+    emit('typing');
+    if (!props.typingEndpoint) return;
+    const now = Date.now();
+    if (now - lastTypingSent < 3000) return;
+    lastTypingSent = now;
+    sendTypingIndicator();
+
+    window.clearTimeout(typingTimer);
+    typingTimer = window.setTimeout(() => {
+        lastTypingSent = 0;
+    }, 4000);
+}
+
+async function sendTypingIndicator() {
+    try {
+        await fetch(props.typingEndpoint, {
+            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 {
+        // silently ignore
+    }
+}
+
+function handleKeydown(e) {
+    // Let mention dropdown handle keys first
+    if (mentionActive.value && mentionDropdownRef.value) {
+        const handled = mentionDropdownRef.value.onKeydown(e);
+        if (handled) return;
+    }
+
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        submit();
+    }
+}
+
+function triggerFileInput() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.addEventListener('change', () => {
+        if (input.files) {
+            files.value = [...files.value, ...Array.from(input.files)];
+        }
+    });
+    input.click();
+}
+
+function removeFile(index) {
+    files.value.splice(index, 1);
+}
+
+async function submit() {
+    if (!body.value.trim() || submitting.value || props.disabled) return;
+    submitting.value = true;
+    window.clearTimeout(typingTimer);
+    lastTypingSent = 0;
+
+    const payload = {
+        body: body.value,
+        is_internal_note: isNote.value,
+        attachments: files.value,
+    };
+
+    emit('send', payload);
+
+    if (props.sendEndpoint) {
+        try {
+            await fetch(props.sendEndpoint, {
+                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(payload),
+            });
+        } catch {
+            // error handling delegated to caller
+        }
+    }
+
+    body.value = '';
+    files.value = [];
+    isNote.value = false;
+    submitting.value = false;
+
+    // Re-focus textarea
+    textareaRef.value?.focus();
+}
+</script>
+
+<template>
+    <div
+        :class="[
+            'border-t',
+            isNote
+                ? escDark
+                    ? 'border-amber-500/20 bg-amber-500/5'
+                    : 'border-yellow-200 bg-yellow-50'
+                : escDark
+                  ? 'border-white/[0.06] bg-neutral-900/60'
+                  : 'border-gray-200 bg-white',
+        ]"
+    >
+        <!-- Note/Reply toggle -->
+        <div v-if="allowNotes" class="flex gap-1 px-3 pt-2">
+            <button
+                :class="[
+                    'rounded px-2 py-0.5 text-xs font-medium transition-colors',
+                    !isNote
+                        ? escDark
+                            ? 'bg-cyan-500/15 text-white'
+                            : 'bg-blue-100 text-blue-700'
+                        : escDark
+                          ? 'text-neutral-500 hover:text-neutral-300'
+                          : 'text-gray-400 hover:text-gray-600',
+                ]"
+                @click="isNote = false"
+            >
+                {{ t('reply.reply') }}
+            </button>
+            <button
+                :class="[
+                    'rounded px-2 py-0.5 text-xs font-medium transition-colors',
+                    isNote
+                        ? escDark
+                            ? 'bg-amber-500/15 text-amber-400'
+                            : 'bg-yellow-100 text-yellow-700'
+                        : escDark
+                          ? 'text-neutral-500 hover:text-neutral-300'
+                          : 'text-gray-400 hover:text-gray-600',
+                ]"
+                aria-label="Internal note"
+                @click="isNote = true"
+            >
+                {{ t('chat.note') }}
+            </button>
+        </div>
+
+        <!-- File list -->
+        <div v-if="files.length" class="flex flex-wrap gap-2 px-3 pt-2">
+            <span
+                v-for="(file, i) in files"
+                :key="i"
+                :class="[
+                    'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
+                    escDark ? 'bg-neutral-800 text-neutral-400' : 'bg-gray-100 text-gray-600',
+                ]"
+            >
+                {{ file.name }}
+                <button
+                    aria-label="Remove attachment"
+                    :class="[escDark ? 'text-rose-400 hover:text-rose-300' : 'text-red-500 hover:text-red-700']"
+                    @click="removeFile(i)"
+                >
+                    &times;
+                </button>
+            </span>
+        </div>
+
+        <!-- Input row -->
+        <div class="flex items-end gap-2 p-3">
+            <!-- Attachment button -->
+            <button
+                v-if="allowAttachments"
+                :disabled="disabled"
+                :class="[
+                    'flex-shrink-0 rounded-lg p-2 transition-colors',
+                    disabled
+                        ? 'cursor-not-allowed opacity-40'
+                        : escDark
+                          ? 'text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300'
+                          : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                ]"
+                aria-label="Attach file"
+                @click="triggerFileInput"
+            >
+                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" 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>
+            </button>
+
+            <!-- Text input -->
+            <div class="relative flex-1">
+                <textarea
+                    ref="textareaRef"
+                    v-model="body"
+                    :disabled="disabled"
+                    rows="1"
+                    :placeholder="isNote ? t('reply.write_internal_note') : t('chat.placeholder')"
+                    :class="[
+                        'w-full resize-none rounded-xl border px-4 py-2 text-sm focus:outline-none focus:ring-1',
+                        disabled && 'cursor-not-allowed opacity-50',
+                        escDark
+                            ? 'border-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:ring-white/10'
+                            : 'border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500',
+                    ]"
+                    aria-label="Chat message"
+                    @input="
+                        onInput();
+                        onMentionInput();
+                    "
+                    @keydown="handleKeydown"
+                ></textarea>
+                <MentionDropdown
+                    ref="mentionDropdownRef"
+                    :suggestions="suggestions"
+                    :visible="mentionActive"
+                    :loading="mentionLoading"
+                    class="bottom-0 left-0 translate-y-full"
+                    @select="handleMentionSelect"
+                    @close="closeMentions"
+                />
+            </div>
+
+            <!-- Send button -->
+            <button
+                :disabled="!body.trim() || submitting || disabled"
+                :class="[
+                    'flex-shrink-0 rounded-xl p-2 transition-all',
+                    !body.trim() || submitting || disabled ? 'cursor-not-allowed opacity-40' : '',
+                    isNote
+                        ? 'bg-amber-500 text-white hover:bg-amber-400'
+                        : escDark
+                          ? 'bg-gradient-to-r from-cyan-500 to-violet-500 text-white hover:from-cyan-400 hover:to-violet-400'
+                          : 'bg-blue-600 text-white hover:bg-blue-500',
+                ]"
+                aria-label="Send message"
+                @click="submit"
+            >
+                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+                    />
+                </svg>
+            </button>
+        </div>
+    </div>
+</template>

package/src/components/ChatQueue.vue

@@ -0,0 +1,222 @@
+<script setup>
+import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import { useI18n } from '../composables/useI18n';
+import { useChat } from '../composables/useChat';
+
+const props = defineProps({
+    sessions: { type: Array, default: () => [] },
+    acceptEndpoint: { type: String, default: '' },
+});
+
+const emit = defineEmits(['accept', 'refresh']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const { t } = useI18n();
+
+// Live elapsed timers
+const now = ref(Date.now());
+let timerInterval = null;
+
+onMounted(() => {
+    timerInterval = setInterval(() => {
+        now.value = Date.now();
+    }, 1000);
+});
+
+onUnmounted(() => {
+    clearInterval(timerInterval);
+});
+
+function waitTime(createdAt) {
+    if (!createdAt) return '0s';
+    const diffMs = now.value - new Date(createdAt).getTime();
+    const totalSecs = Math.max(0, Math.floor(diffMs / 1000));
+    if (totalSecs < 60) return `${totalSecs}s`;
+    const mins = Math.floor(totalSecs / 60);
+    if (mins < 60) return `${mins}m ${totalSecs % 60}s`;
+    const hrs = Math.floor(mins / 60);
+    return `${hrs}h ${mins % 60}m`;
+}
+
+const sortedSessions = computed(() => {
+    return [...props.sessions].sort((a, b) => {
+        return new Date(a.created_at) - new Date(b.created_at);
+    });
+});
+
+async function acceptChat(session) {
+    emit('accept', session);
+    if (props.acceptEndpoint) {
+        try {
+            await fetch(props.acceptEndpoint.replace(':id', session.id), {
+                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
+        }
+    }
+}
+
+// Subscribe to queue for real-time updates. Read the host framework's
+// route prefix from Inertia page props so chat API calls resolve
+// correctly on NestJS backends ('/escalated/widget') as well as every
+// other framework ('/support/widget').
+const page = usePage();
+const routePrefix = page.props.escalated?.prefix || 'support';
+const { subscribeToChatQueue } = useChat({ widgetPath: `/${routePrefix}/widget` });
+
+onMounted(() => {
+    subscribeToChatQueue({
+        onNewChat() {
+            emit('refresh');
+        },
+        onChatAccepted() {
+            emit('refresh');
+        },
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Empty state -->
+        <div
+            v-if="!sortedSessions.length"
+            :class="[
+                'rounded-xl border p-8 text-center',
+                escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
+            ]"
+        >
+            <svg
+                :class="['mx-auto mb-3 h-10 w-10', escDark ? 'text-neutral-700' : 'text-gray-300']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
+                />
+            </svg>
+            <p :class="['text-sm', escDark ? 'text-neutral-600' : 'text-gray-400']">
+                {{ t('chat.no_chats_waiting') }}
+            </p>
+        </div>
+
+        <!-- Queue list -->
+        <div
+            v-else
+            :class="[
+                'overflow-hidden rounded-xl border',
+                escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
+            ]"
+        >
+            <table class="min-w-full">
+                <thead>
+                    <tr :class="escDark ? 'bg-white/[0.02]' : 'bg-gray-50'">
+                        <th
+                            :class="[
+                                'px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider',
+                                escDark ? 'text-neutral-500' : 'text-gray-500',
+                            ]"
+                        >
+                            {{ t('chat.customer') }}
+                        </th>
+                        <th
+                            :class="[
+                                'px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider',
+                                escDark ? 'text-neutral-500' : 'text-gray-500',
+                            ]"
+                        >
+                            {{ t('chat.department') }}
+                        </th>
+                        <th
+                            :class="[
+                                'px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider',
+                                escDark ? 'text-neutral-500' : 'text-gray-500',
+                            ]"
+                        >
+                            {{ t('chat.first_message') }}
+                        </th>
+                        <th
+                            :class="[
+                                'px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider',
+                                escDark ? 'text-neutral-500' : 'text-gray-500',
+                            ]"
+                        >
+                            {{ t('chat.wait_time') }}
+                        </th>
+                        <th
+                            :class="[
+                                'px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider',
+                                escDark ? 'text-neutral-500' : 'text-gray-500',
+                            ]"
+                        ></th>
+                    </tr>
+                </thead>
+                <tbody :class="escDark ? 'divide-y divide-white/[0.04]' : 'divide-y divide-gray-100'">
+                    <tr
+                        v-for="session in sortedSessions"
+                        :key="session.id"
+                        :class="['transition-colors', escDark ? 'hover:bg-white/[0.03]' : 'hover:bg-gray-50']"
+                    >
+                        <td class="px-4 py-3">
+                            <div :class="['text-sm font-medium', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                                {{ session.customer_name || t('ticket.unknown') }}
+                            </div>
+                            <div :class="['text-xs', escDark ? 'text-neutral-600' : 'text-gray-400']">
+                                {{ session.customer_email || '' }}
+                            </div>
+                        </td>
+                        <td :class="['px-4 py-3 text-sm', escDark ? 'text-neutral-400' : 'text-gray-500']">
+                            {{ session.department?.name || '---' }}
+                        </td>
+                        <td
+                            :class="[
+                                'max-w-[200px] truncate px-4 py-3 text-sm',
+                                escDark ? 'text-neutral-400' : 'text-gray-600',
+                            ]"
+                        >
+                            {{ session.first_message || '...' }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <span
+                                :class="[
+                                    'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                                    escDark ? 'bg-amber-500/10 text-amber-400' : 'bg-amber-50 text-amber-700',
+                                ]"
+                            >
+                                {{ waitTime(session.created_at) }}
+                            </span>
+                        </td>
+                        <td class="px-4 py-3 text-right">
+                            <button
+                                :class="[
+                                    'rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-all',
+                                    escDark
+                                        ? 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400'
+                                        : 'bg-blue-600 hover:bg-blue-500',
+                                ]"
+                                @click="acceptChat(session)"
+                            >
+                                {{ t('chat.accept') }}
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>