@escalated-dev/escalated 0.11.10 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escalated-dev/escalated",
-    "version": "0.11.10",
+    "version": "0.12.1",
     "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
     "author": "Escalated Dev <hello@escalated.dev>",
     "license": "MIT",
@@ -18,16 +18,26 @@
         "escalated"
     ],
     "type": "module",
+    "devEngines": {
+        "runtime": {
+            "name": "node",
+            "version": "^22.22.2 || ^24.15.0 || >=26.0.0",
+            "onFail": "error"
+        }
+    },
     "exports": {
         "./components/*": "./src/components/*",
         "./pages/*": "./src/pages/*",
         "./locales": "./src/locales/index.js",
         "./locales/*": "./src/locales/*",
         ".": "./src/index.js",
-        "./pages.json": "./pages.json"
+        "./pages.json": "./pages.json",
+        "./widget": "./dist/widget/escalated-widget.js",
+        "./widget/source": "./src/widget/index.js"
     },
     "files": [
         "src",
+        "dist/widget",
         "pages.json"
     ],
     "peerDependencies": {
@@ -39,6 +49,7 @@
     },
     "scripts": {
         "test": "vitest run",
+        "test:inertia": "node scripts/verify-inertia-flash.mjs",
         "lint": "eslint src/ --max-warnings 0",
         "lint:fix": "eslint src/ --fix",
         "format": "prettier --write src/",
@@ -49,9 +60,11 @@
         "screenshot": "npx playwright test --config=playwright-screenshots.config.js",
         "demo:serve": "node scripts/demo-server.js",
         "demo:record": "node scripts/generate-demo.js",
-        "demo": "concurrently -k -s second \"npm run demo:serve\" \"wait-on http://localhost:3000 && npm run demo:record\"",
+        "demo": "concurrently -k -s command-1 \"npm run demo:serve\" \"wait-on http://localhost:3000 && npm run demo:record\"",
         "pages:manifest": "node scripts/generate-page-manifest.js",
-        "pages:check": "node scripts/generate-page-manifest.js --check"
+        "pages:check": "node scripts/generate-page-manifest.js --check",
+        "build:widget": "vite build -c vite.widget.config.js",
+        "prepack": "vite build -c vite.widget.config.js --logLevel error"
     },
     "lint-staged": {
         "*.{js,vue}": [
@@ -59,6 +72,11 @@
             "prettier --write"
         ]
     },
+    "overrides": {
+        "concurrently": {
+            "shell-quote": "^1.12.0"
+        }
+    },
     "devDependencies": {
         "@eslint/js": "^10.0.1",
         "@inertiajs/vue3": "^3.7.0",
@@ -74,7 +92,7 @@
         "eslint": "^10.9.1",
         "eslint-plugin-storybook": "^10.5.10",
         "eslint-plugin-vue": "^10.10.0",
-        "happy-dom": "^20.14.0",
+        "happy-dom": "^21.0.1",
         "husky": "^9.1.7",
         "lint-staged": "^17.4.1",
         "playwright": "^1.62.1",
@@ -82,6 +100,7 @@
         "prettier": "^3.9.6",
         "storybook": "^10.5.10",
         "tailwindcss": "^4.3.3",
+        "vite": "^8.2.2",
         "vitest": "^5.0.0",
         "vue": "^3.5.42",
         "wait-on": "^9.1.0"

package/pages.json

@@ -1,6 +1,6 @@
 {
     "$comment": "Generated by scripts/generate-page-manifest.js from src/pages. Every name here resolves to a component; a name a backend renders that is not here is a blank screen. `props` is what each component reads -- a backend sending something else renders the screen with no content in it.",
-    "version": "0.11.10",
+    "version": "0.12.1",
     "pages": [
         "Escalated/Admin/ApiTokens/Index",
         "Escalated/Admin/AuditLog/Index",
@@ -564,7 +564,9 @@
         "Escalated/Admin/Settings": {
             "props": [
                 "departments",
-                "settings"
+                "settings",
+                "supported_settings",
+                "update_url"
             ],
             "required": []
         },
@@ -837,7 +839,9 @@
         "Escalated/Guest/Create": {
             "props": [
                 "departments",
-                "priorities"
+                "lookup_url",
+                "priorities",
+                "verification_url"
             ],
             "required": []
         },

package/src/components/ActiveChatsPanel.vue

@@ -95,7 +95,10 @@ function chatInitials(chat) {
 // that use '/escalated/widget' instead of '/support/widget'.
 const page = usePage();
 const routePrefix = page.props.escalated?.prefix || 'support';
-const { subscribeToChatQueue } = useChat({ widgetPath: `/${routePrefix}/widget` });
+const { subscribeToChatQueue } = useChat({
+    channelPrefix: () => page.props.escalated?.broadcasting?.channel_prefix,
+    widgetPath: `/${routePrefix}/widget`,
+});
 
 onMounted(() => {
     subscribeToChatQueue({

package/src/components/ChatQueue.vue

@@ -73,7 +73,10 @@ async function acceptChat(session) {
 // other framework ('/support/widget').
 const page = usePage();
 const routePrefix = page.props.escalated?.prefix || 'support';
-const { subscribeToChatQueue } = useChat({ widgetPath: `/${routePrefix}/widget` });
+const { subscribeToChatQueue } = useChat({
+    channelPrefix: () => page.props.escalated?.broadcasting?.channel_prefix,
+    widgetPath: `/${routePrefix}/widget`,
+});
 
 onMounted(() => {
     subscribeToChatQueue({

package/src/components/GuestEmailCode.vue

@@ -0,0 +1,58 @@
+<script setup>
+defineProps({ verification: { type: Object, required: true } });
+defineEmits(['code']);
+</script>
+
+<template>
+    <div class="guest-email-code space-y-2" aria-live="polite">
+        <p v-if="verification.state.message" class="text-sm">{{ verification.state.message }}</p>
+        <p v-if="verification.state.error" class="text-sm text-red-600" role="alert">{{ verification.state.error }}</p>
+        <label v-if="verification.state.id" class="block text-sm">
+            Email verification code
+            <input
+                :value="verification.state.code"
+                type="text"
+                inputmode="numeric"
+                autocomplete="one-time-code"
+                maxlength="8"
+                class="mt-1 block w-full rounded-lg border border-gray-300 p-2 text-gray-900"
+                @input="$emit('code', $event.target.value)"
+            />
+        </label>
+        <button
+            v-if="verification.state.id"
+            type="button"
+            class="text-sm underline"
+            :disabled="verification.state.pending"
+            @click="verification.send()"
+        >
+            Send a new code
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.guest-email-code {
+    margin: 12px 0;
+    font-size: 14px;
+}
+.guest-email-code label,
+.guest-email-code input {
+    display: block;
+}
+.guest-email-code input {
+    box-sizing: border-box;
+    width: 100%;
+    margin-top: 6px;
+    padding: 8px;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    color: #111827;
+    background: #fff;
+}
+.guest-email-code button {
+    margin-top: 8px;
+    cursor: pointer;
+    text-decoration: underline;
+}
+</style>

package/src/components/PresenceIndicator.vue

@@ -4,6 +4,7 @@ import { ref, computed, inject, onUnmounted, watch } from 'vue';
 const props = defineProps({
     ticketReference: { type: String, required: true },
     ticketId: { type: [Number, String], default: null },
+    channelPrefix: { type: String, default: 'escalated' },
     routePrefix: { type: String, required: true },
     pollInterval: { type: Number, default: 30000 },
     showLabel: { type: Boolean, default: false },
@@ -23,11 +24,18 @@ let presenceChannel = null;
 // Track the exact channel name we joined so we leave the RIGHT channel when the
 // ticket changes — props.ticketId would already hold the new id by then.
 let joinedChannelName = null;
+let generation = 0;
+let pendingRequest = null;
 
 async function fetchPresence() {
+    const currentGeneration = generation;
+    pendingRequest?.abort();
+    const controller = new window.AbortController();
+    pendingRequest = controller;
     try {
         const response = await fetch(route(`${props.routePrefix}.tickets.presence`, props.ticketReference), {
             method: 'POST',
+            signal: controller.signal,
             headers: {
                 Accept: 'application/json',
                 'Content-Type': 'application/json',
@@ -37,7 +45,9 @@ async function fetchPresence() {
         });
         if (response.ok) {
             const data = await response.json();
-            viewers.value = data.viewers || data || [];
+            if (currentGeneration === generation && !controller.signal.aborted) {
+                viewers.value = data.viewers || data || [];
+            }
         }
     } catch {
         // silently ignore network errors
@@ -52,19 +62,23 @@ function initPresenceChannel() {
     if (!echoAvailable || !props.ticketId) return false;
 
     try {
-        joinedChannelName = `escalated.tickets.${props.ticketId}`;
+        const currentGeneration = generation;
+        joinedChannelName = `${props.channelPrefix}.tickets.${props.ticketId}`;
         presenceChannel = window.Echo.join(joinedChannelName);
 
         presenceChannel
             .here((users) => {
+                if (currentGeneration !== generation) return;
                 viewers.value = users;
             })
             .joining((user) => {
+                if (currentGeneration !== generation) return;
                 if (!viewers.value.find((v) => v.id === user.id)) {
                     viewers.value = [...viewers.value, user];
                 }
             })
             .leaving((user) => {
+                if (currentGeneration !== generation) return;
                 viewers.value = viewers.value.filter((v) => v.id !== user.id);
             });
 
@@ -104,13 +118,17 @@ function getColor(index) {
 }
 
 function teardown() {
+    generation++;
+    pendingRequest?.abort();
+    pendingRequest = null;
     if (intervalId) {
         clearInterval(intervalId);
         intervalId = null;
     }
     if (presenceChannel) {
         try {
-            window.Echo.leave(joinedChannelName);
+            if (window.Echo.leaveChannel) window.Echo.leaveChannel(`presence-${joinedChannelName}`);
+            else window.Echo.leave(`presence-${joinedChannelName}`);
         } catch {
             // ignore
         }
@@ -134,7 +152,10 @@ function start() {
 }
 
 // (Re)initialise whenever the ticket identity changes; `immediate` covers mount.
-watch(() => [props.ticketId, props.ticketReference], start, { immediate: true });
+watch(() => [props.ticketId, props.ticketReference, props.routePrefix, props.channelPrefix], start, {
+    immediate: true,
+    flush: 'sync',
+});
 
 onUnmounted(teardown);
 </script>

package/src/components/ReportExportButton.vue

@@ -9,9 +9,12 @@ const props = defineProps({
 
 const open = ref(false);
 const loading = ref(false);
+const error = ref('');
 
 async function exportAs(format) {
+    if (loading.value) return;
     loading.value = true;
+    error.value = '';
     try {
         const separator = props.exportUrl.includes('?') ? '&' : '?';
         const url = props.exportUrl ? `${props.exportUrl}${separator}format=${format}&days=${props.periodDays}` : '#';
@@ -28,6 +31,7 @@ async function exportAs(format) {
             URL.revokeObjectURL(a.href);
         } else {
             const response = await fetch(url);
+            if (!response.ok) throw new Error(`Export failed (${response.status}). Please try again.`);
             const blob = await response.blob();
             const a = document.createElement('a');
             a.href = URL.createObjectURL(blob);
@@ -35,6 +39,8 @@ async function exportAs(format) {
             a.click();
             URL.revokeObjectURL(a.href);
         }
+    } catch {
+        error.value = 'Export failed. Please try again.';
     } finally {
         loading.value = false;
         open.value = false;
@@ -44,7 +50,10 @@ async function exportAs(format) {
 
 <template>
     <div class="relative">
+        <p v-if="error" role="alert" class="mb-2 text-sm text-red-600">{{ error }}</p>
         <button
+            type="button"
+            :disabled="loading"
             class="flex items-center gap-2 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3.5 py-1.5 text-sm font-medium text-[var(--esc-panel-text-tertiary)] transition-all hover:text-[var(--esc-panel-text-secondary)]"
             @click="open = !open"
         >
@@ -66,6 +75,8 @@ async function exportAs(format) {
             class="absolute right-0 top-full z-10 mt-1 w-44 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] py-1 shadow-xl"
         >
             <button
+                type="button"
+                :disabled="loading"
                 class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]"
                 @click="exportAs('csv')"
             >
@@ -85,6 +96,8 @@ async function exportAs(format) {
                 Export as CSV
             </button>
             <button
+                type="button"
+                :disabled="loading"
                 class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]"
                 @click="exportAs('json')"
             >

package/src/components/TotpInput.vue

@@ -25,7 +25,7 @@ function handleInput(index, event) {
         nextTick(() => inputs.value[index + 1]?.focus());
     }
 
-    if (code.length === 6 && !code.includes('')) {
+    if (code.length === 6) {
         emit('complete', code);
     }
 }

package/src/composables/useChat.js

@@ -20,7 +20,7 @@ export function useChat(options = {}) {
     const connectionState = ref('disconnected'); // disconnected | connecting | connected
     const messageBuffer = ref([]);
 
-    const { echoAvailable, listen } = useRealtime();
+    const { echoAvailable, listenScoped } = useRealtime(options);
 
     function csrfToken() {
         return typeof document !== 'undefined' ? document.querySelector('meta[name="csrf-token"]')?.content || '' : '';
@@ -68,11 +68,12 @@ export function useChat(options = {}) {
      * @param {string|number} sessionId
      * @returns {Promise<void>}
      */
-    let lastTypingSent = 0;
+    const lastTypingSent = new Map();
     async function sendTyping(sessionId) {
         const now = Date.now();
-        if (now - lastTypingSent < 3000) return;
-        lastTypingSent = now;
+        const key = String(sessionId);
+        if (lastTypingSent.has(key) && now - lastTypingSent.get(key) < 3000) return;
+        lastTypingSent.set(key, now);
         try {
             await apiRequest('POST', `${widgetPath}/chat/${sessionId}/typing`);
         } catch {
@@ -123,26 +124,17 @@ export function useChat(options = {}) {
     function subscribeToChat(sessionId, callbacks = {}) {
         if (!echoAvailable.value) return () => {};
 
-        const channelName = `escalated.chat.${sessionId}`;
-        const unsubs = [];
-
-        if (callbacks.onMessage) {
-            unsubs.push(listen(channelName, '.chat.message', callbacks.onMessage));
-        }
-        if (callbacks.onTyping) {
-            unsubs.push(listen(channelName, '.chat.typing', callbacks.onTyping));
-        }
-        if (callbacks.onEnded) {
-            unsubs.push(listen(channelName, '.chat.ended', callbacks.onEnded));
-        }
-        if (callbacks.onAssigned) {
-            unsubs.push(listen(channelName, '.chat.assigned', callbacks.onAssigned));
-        }
+        const unsubscribe = listenScoped(`chat.${sessionId}`, {
+            '.chat.message': callbacks.onMessage,
+            '.chat.typing': callbacks.onTyping,
+            '.chat.ended': callbacks.onEnded,
+            '.chat.assigned': callbacks.onAssigned,
+        });
 
         connectionState.value = 'connected';
 
         return () => {
-            unsubs.forEach((fn) => fn());
+            unsubscribe();
             connectionState.value = 'disconnected';
         };
     }
@@ -157,19 +149,10 @@ export function useChat(options = {}) {
     function subscribeToChatQueue(callbacks = {}) {
         if (!echoAvailable.value) return () => {};
 
-        const channelName = 'escalated.chat.queue';
-        const unsubs = [];
-
-        if (callbacks.onNewChat) {
-            unsubs.push(listen(channelName, '.chat.new', callbacks.onNewChat));
-        }
-        if (callbacks.onChatAccepted) {
-            unsubs.push(listen(channelName, '.chat.accepted', callbacks.onChatAccepted));
-        }
-
-        return () => {
-            unsubs.forEach((fn) => fn());
-        };
+        return listenScoped('chat.queue', {
+            '.chat.new': callbacks.onNewChat,
+            '.chat.accepted': callbacks.onChatAccepted,
+        });
     }
 
     return {

package/src/composables/useGuestVerification.js

@@ -0,0 +1,48 @@
+import { onScopeDispose, reactive, watch } from 'vue';
+
+/** Keep each mailbox proof tied to the form and destination that requested it. */
+export function useGuestVerification(email, purpose, requestCode, context = () => '') {
+    const state = reactive({ id: '', code: '', message: '', error: '', pending: false });
+    let generation = 0;
+    function reset() {
+        generation++;
+        Object.assign(state, { id: '', code: '', message: '', error: '', pending: false });
+    }
+    watch([email, context], reset, { flush: 'sync' });
+    onScopeDispose(reset);
+
+    async function send() {
+        if (state.pending) return;
+        reset();
+        const current = generation;
+        state.pending = true;
+        try {
+            const result = await requestCode(email(), purpose);
+            if (current !== generation) return;
+            if (typeof result.verification_id !== 'string' || !result.verification_id) {
+                throw new Error('Could not request a verification code.');
+            }
+            state.id = result.verification_id;
+            state.message = 'Check your email. Enter the 8-digit code to continue; it expires in 10 minutes.';
+        } catch (error) {
+            if (current === generation) state.error = error.message || 'Could not request a verification code.';
+        } finally {
+            if (current === generation) state.pending = false;
+        }
+    }
+
+    async function ready() {
+        if (!state.id) {
+            await send();
+            return false;
+        }
+        state.error = '';
+        if (!/^[0-9]{8}$/.test(state.code)) {
+            state.error = 'Enter the 8-digit code from your email.';
+            return false;
+        }
+        return true;
+    }
+
+    return { state, ready, send, reset, fields: () => ({ verification_id: state.id, verification_code: state.code }) };
+}

package/src/composables/useKeyboardShortcuts.js

@@ -11,6 +11,8 @@ export function useKeyboardShortcuts(shortcuts, options = {}) {
     const ignoredTags = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
 
     function handleKeydown(event) {
+        if (event.defaultPrevented || event.isComposing || event.keyCode === 229) return;
+
         // Check if shortcuts are enabled
         if (options.enabled !== undefined && !unref(options.enabled)) {
             return;

package/src/composables/useMentions.js

@@ -20,6 +20,7 @@ export function useMentions(options = {}) {
     const loading = ref(false);
 
     let timer = null;
+    let requestVersion = 0;
 
     function clearTimer() {
         if (timer !== null) {
@@ -55,18 +56,23 @@ export function useMentions(options = {}) {
 
     function debouncedFetch(searchQuery) {
         clearTimer();
+        const version = ++requestVersion;
+        // Keep the current list on screen while the next search is pending,
+        // so the dropdown stays open and Enter/Tab still pick a mention.
+        // requestVersion already discards any older response.
+        loading.value = true;
 
         if (searchQuery.length < 1) {
-            fetchSuggestions('');
+            fetchSuggestions('', version);
             return;
         }
 
         timer = window.setTimeout(() => {
-            fetchSuggestions(searchQuery);
+            fetchSuggestions(searchQuery, version);
         }, debounce);
     }
 
-    async function fetchSuggestions(searchQuery) {
+    async function fetchSuggestions(searchQuery, version) {
         loading.value = true;
         try {
             const endpoint = options.searchEndpoint || '/support/admin/agents/search';
@@ -78,15 +84,12 @@ export function useMentions(options = {}) {
                     'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                 },
             });
-            if (response.ok) {
-                suggestions.value = await response.json();
-            } else {
-                suggestions.value = [];
-            }
+            const results = response.ok ? await response.json() : [];
+            if (version === requestVersion) suggestions.value = results;
         } catch {
-            suggestions.value = [];
+            if (version === requestVersion) suggestions.value = [];
         } finally {
-            loading.value = false;
+            if (version === requestVersion) loading.value = false;
         }
     }
 
@@ -113,6 +116,8 @@ export function useMentions(options = {}) {
     }
 
     function close() {
+        requestVersion++;
+        loading.value = false;
         isActive.value = false;
         suggestions.value = [];
         query.value = '';
@@ -120,7 +125,7 @@ export function useMentions(options = {}) {
         clearTimer();
     }
 
-    onUnmounted(clearTimer);
+    onUnmounted(close);
 
     return {
         suggestions,