@escalated-dev/escalated 0.12.0 → 0.12.1

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

@@ -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 {

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,

package/src/composables/useRealtime.js

@@ -42,9 +42,14 @@ export function useRealtime(options = {}) {
         const echo = window.Echo;
         const channel = echo.private(channelName);
         const release = retainChannel(echo, channelName, false);
-        channel.listen(eventName, callback);
+        let active = true;
+        const guarded = (...args) => {
+            if (active) callback(...args);
+        };
+        channel.listen(eventName, guarded);
         return track(() => {
-            channel.stopListening(eventName, callback);
+            active = false;
+            channel.stopListening(eventName, guarded);
             release();
         });
     }

package/src/pages/Admin/ApiTokens/Index.vue

@@ -2,6 +2,7 @@
 import { ref, computed, inject } from 'vue';
 import { useForm, usePage } from '@inertiajs/vue3';
 import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { readFlash } from '../../../utils/flash';
 
 defineProps({
     tokens: Array,
@@ -33,10 +34,8 @@ function createToken() {
     form.post(`${prefix.value}/admin/api-tokens`, {
         preserveScroll: true,
         onSuccess: (page) => {
-            const flash = page.props.flash || {};
-            if (flash.plain_text_token) {
-                copiedToken.value = flash.plain_text_token;
-            }
+            const token = readFlash(page).plain_text_token;
+            copiedToken.value = typeof token === 'string' ? token : null;
             form.reset();
             showCreate.value = false;
         },

package/src/pages/Admin/Settings/TwoFactor.vue

@@ -2,7 +2,8 @@
 import EscalatedLayout from '../../../components/EscalatedLayout.vue';
 import TwoFactorSetup from '../../../components/TwoFactorSetup.vue';
 import { router, usePage } from '@inertiajs/vue3';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
+import { readFlash } from '../../../utils/flash';
 
 defineProps({
     enabled: { type: Boolean, default: false },
@@ -11,17 +12,28 @@ defineProps({
 
 const page = usePage();
 const showSetup = ref(false);
-const setupData = computed(() => page.props.flash?.two_factor_setup);
-const confirmedData = computed(() => page.props.flash?.two_factor_confirmed);
+const startingSetup = ref(false);
+const flash = computed(() => readFlash(page));
+const setupData = computed(() => flash.value.two_factor_setup);
+const confirmedData = computed(() => flash.value.two_factor_confirmed);
+const copyError = ref('');
+
+watch(setupData, (data) => (showSetup.value = Boolean(data)), { immediate: true });
+watch(confirmedData, () => (copyError.value = ''));
 
 function startSetup() {
+    if (startingSetup.value) return;
+    startingSetup.value = true;
     router.post(
         route('escalated.admin.two-factor.setup'),
         {},
         {
             preserveScroll: true,
             onSuccess: () => {
-                showSetup.value = true;
+                showSetup.value = Boolean(setupData.value);
+            },
+            onFinish: () => {
+                startingSetup.value = false;
             },
         },
     );
@@ -48,6 +60,18 @@ function disable() {
         );
     }
 }
+
+async function copyRecoveryCodes() {
+    const codes = confirmedData.value?.recovery_codes;
+    if (!codes?.length) return;
+    copyError.value = '';
+    try {
+        if (!navigator.clipboard?.writeText) throw new Error('Clipboard unavailable');
+        await navigator.clipboard.writeText(codes.join('\n'));
+    } catch {
+        copyError.value = 'Could not copy recovery codes. Select and copy the codes below.';
+    }
+}
 </script>
 
 <template>
@@ -75,7 +99,7 @@ function disable() {
                             Disable 2FA
                         </button>
                     </div>
-                    <div v-else-if="!showSetup && !setupData">
+                    <div v-else-if="!showSetup">
                         <span
                             class="mb-3 inline-flex items-center rounded-full bg-neutral-700/50 px-3 py-1 text-xs font-medium text-[var(--esc-panel-text-tertiary)]"
                         >
@@ -84,6 +108,8 @@ function disable() {
                         <div class="mt-3">
                             <button
                                 type="button"
+                                :disabled="startingSetup"
+                                :aria-busy="startingSetup"
                                 class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-5 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
                                 @click="startSetup"
                             >
@@ -96,7 +122,7 @@ function disable() {
 
             <!-- Setup Wizard -->
             <div
-                v-if="setupData && !enabled"
+                v-if="showSetup && setupData && !enabled"
                 class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
             >
                 <TwoFactorSetup :qr-uri="setupData.qr_uri" @confirm="confirmCode" @cancel="showSetup = false" />
@@ -116,11 +142,12 @@ function disable() {
                     <button
                         type="button"
                         class="rounded-lg border border-[var(--esc-panel-border)] px-4 py-2 text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-surface-alt)]"
-                        @click="navigator.clipboard?.writeText(confirmedData.recovery_codes.join('\n'))"
+                        @click="copyRecoveryCodes"
                     >
                         Copy Codes
                     </button>
                 </div>
+                <p v-if="copyError" role="alert" class="mt-3 text-sm text-rose-400">{{ copyError }}</p>
                 <div class="mt-4 grid gap-2 md:grid-cols-2">
                     <code
                         v-for="code in confirmedData.recovery_codes"

package/src/pages/Admin/Settings.vue

@@ -15,6 +15,8 @@ const supported = computed(() => (props.supported_settings === null ? null : new
 const supports = (key) => supported.value === null || supported.value.has(key);
 const supportsAny = (keys) => keys.some(supports);
 const page = usePage();
+// Absolute, so the snippet also works when pasted into another site.
+const siteOrigin = typeof window === 'undefined' ? '' : window.location.origin;
 
 const settingsData = () => ({
     guest_tickets_enabled: props.settings.guest_tickets_enabled,
@@ -42,6 +44,7 @@ const settingsData = () => ({
     widget_position: props.settings.widget_position ?? 'bottom-right',
     widget_greeting: props.settings.widget_greeting ?? 'Hi there! How can we help?',
     widget_departments: props.settings.widget_departments ?? '',
+    widget_allowed_origins: props.settings.widget_allowed_origins ?? '',
     knowledge_base_enabled: props.settings.knowledge_base_enabled ?? true,
     knowledge_base_public: props.settings.knowledge_base_public ?? true,
     knowledge_base_feedback_enabled: props.settings.knowledge_base_feedback_enabled ?? true,
@@ -685,6 +688,7 @@ function submit() {
                         'widget_greeting',
                         'widget_position',
                         'widget_departments',
+                        'widget_allowed_origins',
                     ])
                 "
                 class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
@@ -719,7 +723,13 @@ function submit() {
                     <template
                         v-if="
                             form.widget_enabled &&
-                            supportsAny(['widget_color', 'widget_greeting', 'widget_position', 'widget_departments'])
+                            supportsAny([
+                                'widget_color',
+                                'widget_greeting',
+                                'widget_position',
+                                'widget_departments',
+                                'widget_allowed_origins',
+                            ])
                         "
                     >
                         <div v-if="supports('widget_color')">
@@ -799,6 +809,26 @@ function submit() {
                                 </label>
                             </div>
                         </div>
+                        <div v-if="supports('widget_allowed_origins')">
+                            <label
+                                for="widget-allowed-origins"
+                                class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Sites that can embed the widget</label
+                            >
+                            <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">
+                                One site per line, such as https://shop.example.com. Use https://*.example.com for every
+                                subdomain. Leave empty to allow this site only.
+                            </p>
+                            <textarea
+                                id="widget-allowed-origins"
+                                v-model="form.widget_allowed_origins"
+                                rows="3"
+                                maxlength="5000"
+                                spellcheck="false"
+                                placeholder="https://shop.example.com"
+                                class="mt-2 w-full max-w-lg rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 font-mono text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            ></textarea>
+                        </div>
                         <div
                             class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)] p-4"
                         >
@@ -810,8 +840,9 @@ function submit() {
                             </p>
                             <code
                                 class="mt-2 block whitespace-pre-wrap break-all rounded-lg bg-[var(--esc-panel-bg)] p-3 text-xs text-[var(--esc-panel-text-tertiary)] select-all"
-                                >&lt;script src="/{{ page.props.escalated?.prefix || 'support' }}/widget/embed.js"
-                                data-color="{{ form.widget_color }}" data-position="{{
+                                >&lt;script src="{{ siteOrigin }}/{{
+                                    page.props.escalated?.prefix || 'support'
+                                }}/widget/embed.js" data-color="{{ form.widget_color }}" data-position="{{
                                     form.widget_position
                                 }}"&gt;&lt;/script&gt;</code
                             >

package/src/utils/flash.js

@@ -0,0 +1,4 @@
+/** Shared props remain supported; Inertia 3's explicit values take precedence. */
+export function readFlash(page) {
+    return { ...page?.props?.flash, ...page?.flash };
+}