@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/WorkflowTriggerSelector.vue

@@ -0,0 +1,125 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const triggers = [
+    {
+        value: 'ticket_created',
+        label: 'Ticket Created',
+        description: 'When a new ticket is submitted',
+        icon: 'M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z',
+    },
+    {
+        value: 'ticket_updated',
+        label: 'Ticket Updated',
+        description: 'When any ticket field is modified',
+        icon: 'M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182',
+    },
+    {
+        value: 'reply_added',
+        label: 'Reply Added',
+        description: 'When a reply is posted on a ticket',
+        icon: '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',
+    },
+    {
+        value: 'status_changed',
+        label: 'Status Changed',
+        description: 'When the ticket status is updated',
+        icon: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    },
+    {
+        value: 'ticket_assigned',
+        label: 'Ticket Assigned',
+        description: 'When a ticket is assigned to an agent',
+        icon: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z',
+    },
+    {
+        value: 'ticket_escalated',
+        label: 'Ticket Escalated',
+        description: 'When a ticket is escalated',
+        icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12',
+    },
+    {
+        value: 'sla_breached',
+        label: 'SLA Breached',
+        description: 'When an SLA target is breached',
+        icon: 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z',
+    },
+    {
+        value: 'sla_warning',
+        label: 'SLA Warning',
+        description: 'When an SLA target is approaching',
+        icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z',
+    },
+    {
+        value: 'chat_started',
+        label: 'Chat Started',
+        description: 'When a live chat session begins',
+        icon: 'M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155',
+    },
+    {
+        value: 'chat_ended',
+        label: 'Chat Ended',
+        description: 'When a live chat session ends',
+        icon: 'M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    },
+];
+
+const selected = computed(() => props.modelValue);
+
+function select(value) {
+    emit('update:modelValue', value);
+}
+</script>
+
+<template>
+    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+        <button
+            v-for="trigger in triggers"
+            :key="trigger.value"
+            type="button"
+            class="group relative flex flex-col items-center rounded-xl border-2 p-4 text-center transition-all"
+            :class="
+                selected === trigger.value
+                    ? 'border-blue-500 bg-blue-500/10 shadow-lg shadow-blue-500/10'
+                    : 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] hover:border-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)]'
+            "
+            @click="select(trigger.value)"
+        >
+            <div
+                class="mb-2 flex h-10 w-10 items-center justify-center rounded-lg"
+                :class="
+                    selected === trigger.value
+                        ? 'bg-blue-500/20 text-blue-400'
+                        : 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-muted)] group-hover:text-[var(--esc-panel-text-secondary)]'
+                "
+            >
+                <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="trigger.icon" />
+                </svg>
+            </div>
+            <span
+                class="text-xs font-semibold"
+                :class="selected === trigger.value ? 'text-blue-400' : 'text-[var(--esc-panel-text-secondary)]'"
+            >
+                {{ trigger.label }}
+            </span>
+            <span class="mt-1 text-[10px] leading-tight text-[var(--esc-panel-text-muted)]">
+                {{ trigger.description }}
+            </span>
+            <div
+                v-if="selected === trigger.value"
+                class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-white"
+            >
+                <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+            </div>
+        </button>
+    </div>
+</template>

package/src/composables/useChat.js

@@ -0,0 +1,187 @@
+import { ref, readonly } from 'vue';
+import { useRealtime } from './useRealtime';
+
+/**
+ * Composable for live chat functionality.
+ *
+ * Provides methods to start, send messages, end, and rate chat sessions,
+ * plus real-time subscription via useRealtime.
+ *
+ * @param {Object} [options]
+ * @param {string} [options.widgetPath] - Path prefix under which the host
+ *   framework mounts widget routes. Defaults to `/support/widget` which
+ *   matches every host-adapter plugin (Laravel / Rails / Django / Adonis /
+ *   WordPress / Filament / Symfony / .NET / Go / Spring / Phoenix). On a
+ *   NestJS backend, pass `/escalated/widget` (or read from whatever
+ *   configuration channel the host app exposes to the client).
+ */
+export function useChat(options = {}) {
+    const widgetPath = options.widgetPath ?? '/support/widget';
+    const connectionState = ref('disconnected'); // disconnected | connecting | connected
+    const messageBuffer = ref([]);
+
+    const { echoAvailable, listen } = useRealtime();
+
+    function csrfToken() {
+        return typeof document !== 'undefined' ? document.querySelector('meta[name="csrf-token"]')?.content || '' : '';
+    }
+
+    async function apiRequest(method, path, body = null) {
+        const opts = {
+            method,
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': csrfToken(),
+            },
+        };
+        if (body) opts.body = JSON.stringify(body);
+        const res = await fetch(path, opts);
+        const data = await res.json();
+        if (!res.ok) throw { status: res.status, data };
+        return data;
+    }
+
+    /**
+     * Start a new chat session.
+     * @param {Object} data - { name, email, department_id, message }
+     * @returns {Promise<Object>} The created chat session
+     */
+    async function startChat(data) {
+        return apiRequest('POST', `${widgetPath}/chat/start`, data);
+    }
+
+    /**
+     * Send a message in a chat session.
+     * @param {string|number} sessionId
+     * @param {Object} body - { body, is_internal_note?, attachments? }
+     * @returns {Promise<Object>}
+     */
+    async function sendMessage(sessionId, body) {
+        const message = await apiRequest('POST', `${widgetPath}/chat/${sessionId}/messages`, body);
+        return message;
+    }
+
+    /**
+     * Send typing indicator (debounced by caller).
+     * @param {string|number} sessionId
+     * @returns {Promise<void>}
+     */
+    let lastTypingSent = 0;
+    async function sendTyping(sessionId) {
+        const now = Date.now();
+        if (now - lastTypingSent < 3000) return;
+        lastTypingSent = now;
+        try {
+            await apiRequest('POST', `${widgetPath}/chat/${sessionId}/typing`);
+        } catch {
+            // silently ignore typing failures
+        }
+    }
+
+    /**
+     * End a chat session.
+     * @param {string|number} sessionId
+     * @returns {Promise<Object>}
+     */
+    async function endChat(sessionId) {
+        return apiRequest('POST', `${widgetPath}/chat/${sessionId}/end`);
+    }
+
+    /**
+     * Rate a completed chat session.
+     * @param {string|number} sessionId
+     * @param {number} rating - 1-5 star rating
+     * @param {string} [comment]
+     * @returns {Promise<Object>}
+     */
+    async function rateChat(sessionId, rating, comment = '') {
+        return apiRequest('POST', `${widgetPath}/chat/${sessionId}/rate`, { rating, comment });
+    }
+
+    /**
+     * Check chat availability for a department.
+     * @param {string|number} [departmentId]
+     * @returns {Promise<Object>} { available, message, estimated_wait }
+     */
+    async function checkAvailability(departmentId = null) {
+        const query = departmentId ? `?department_id=${departmentId}` : '';
+        return apiRequest('GET', `${widgetPath}/chat/availability${query}`);
+    }
+
+    /**
+     * Subscribe to real-time chat events for a session.
+     * @param {string|number} sessionId
+     * @param {Object} callbacks
+     * @param {Function} [callbacks.onMessage]
+     * @param {Function} [callbacks.onTyping]
+     * @param {Function} [callbacks.onEnded]
+     * @param {Function} [callbacks.onAssigned]
+     * @returns {Function} Unsubscribe function
+     */
+    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));
+        }
+
+        connectionState.value = 'connected';
+
+        return () => {
+            unsubs.forEach((fn) => fn());
+            connectionState.value = 'disconnected';
+        };
+    }
+
+    /**
+     * Subscribe to the chat queue channel for new incoming chats.
+     * @param {Object} callbacks
+     * @param {Function} [callbacks.onNewChat]
+     * @param {Function} [callbacks.onChatAccepted]
+     * @returns {Function} Unsubscribe function
+     */
+    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 {
+        connectionState: readonly(connectionState),
+        messageBuffer: readonly(messageBuffer),
+        startChat,
+        sendMessage,
+        sendTyping,
+        endChat,
+        rateChat,
+        checkAvailability,
+        subscribeToChat,
+        subscribeToChatQueue,
+    };
+}

package/src/composables/useI18n.js

@@ -1,5 +1,17 @@
 import { ref, computed } from 'vue';
-import locales from '../locales/index.js';
+import overrideLocales from '../locales/index.js';
+
+// Central translations published from escalated-dev/escalated-locale.
+// This is the BASE layer. Local src/locales/*.json files in this repo are
+// loaded as OVERRIDES and win over the central source for any matching key.
+//
+// Until @escalated-dev/locale v0.1.0 ships its consolidated strings, this
+// import resolves to a stub object with the same shape. Local overrides
+// (src/locales/) preserve the current behavior so components keep rendering
+// the strings they always rendered. After Codex finishes consolidating
+// translations into the central package, the local override files can be
+// trimmed (or deleted entirely) and the central source becomes authoritative.
+import centralLocales from '@escalated-dev/locale';
 
 const currentLocale = ref('en');
 const customMessages = ref({});
@@ -55,21 +67,31 @@ export function useI18n() {
     function t(key, replacements) {
         const lang = currentLocale.value;
 
-        // Try custom messages for current locale
+        // 1. Host-app supplied messages for the current locale (highest priority).
         const custom = resolve(customMessages.value[lang], key);
         if (typeof custom === 'string') return applyReplacements(custom, replacements);
 
-        // Try built-in messages for current locale
-        const msg = resolve(locales[lang], key);
-        if (typeof msg === 'string') return applyReplacements(msg, replacements);
+        // 2. Local plugin overrides for the current locale (src/locales/*.json).
+        //    These exist to let this repo win over the central source for any
+        //    string the plugin needs to phrase differently.
+        const override = resolve(overrideLocales[lang], key);
+        if (typeof override === 'string') return applyReplacements(override, replacements);
+
+        // 3. Central source for the current locale (@escalated-dev/locale).
+        //    This is the canonical base layer.
+        const central = resolve(centralLocales?.[lang], key);
+        if (typeof central === 'string') return applyReplacements(central, replacements);
 
-        // Fallback to English
+        // 4. English fallbacks, in the same priority order.
         if (lang !== 'en') {
             const customEn = resolve(customMessages.value.en, key);
             if (typeof customEn === 'string') return applyReplacements(customEn, replacements);
 
-            const fallback = resolve(locales.en, key);
-            if (typeof fallback === 'string') return applyReplacements(fallback, replacements);
+            const overrideEn = resolve(overrideLocales.en, key);
+            if (typeof overrideEn === 'string') return applyReplacements(overrideEn, replacements);
+
+            const centralEn = resolve(centralLocales?.en, key);
+            if (typeof centralEn === 'string') return applyReplacements(centralEn, replacements);
         }
 
         // Return raw key

package/src/composables/useKeyboardShortcuts.js

@@ -1,46 +1,46 @@
-import { onMounted, onUnmounted, unref } from 'vue';
-
-/**
- * Composable for registering keyboard shortcuts.
- *
- * @param {Object} shortcuts - Map of key to handler function, e.g. { 'r': () => {}, 'n': () => {} }
- * @param {Object} options - Optional configuration
- * @param {import('vue').Ref<boolean>} options.enabled - Ref controlling whether shortcuts are active (default: true)
- */
-export function useKeyboardShortcuts(shortcuts, options = {}) {
-    const ignoredTags = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
-
-    function handleKeydown(event) {
-        // Check if shortcuts are enabled
-        if (options.enabled !== undefined && !unref(options.enabled)) {
-            return;
-        }
-
-        // Skip when focus is inside form elements or contenteditable
-        const target = event.target;
-        if (target && (ignoredTags.has(target.tagName) || target.isContentEditable)) {
-            return;
-        }
-
-        // Skip if modifier keys are held (allow shift for ? and similar)
-        if (event.ctrlKey || event.metaKey || event.altKey) {
-            return;
-        }
-
-        const key = event.key;
-        const handler = shortcuts[key];
-
-        if (handler && typeof handler === 'function') {
-            event.preventDefault();
-            handler(event);
-        }
-    }
-
-    onMounted(() => {
-        document.addEventListener('keydown', handleKeydown);
-    });
-
-    onUnmounted(() => {
-        document.removeEventListener('keydown', handleKeydown);
-    });
-}
+import { onMounted, onUnmounted, unref } from 'vue';
+
+/**
+ * Composable for registering keyboard shortcuts.
+ *
+ * @param {Object} shortcuts - Map of key to handler function, e.g. { 'r': () => {}, 'n': () => {} }
+ * @param {Object} options - Optional configuration
+ * @param {import('vue').Ref<boolean>} options.enabled - Ref controlling whether shortcuts are active (default: true)
+ */
+export function useKeyboardShortcuts(shortcuts, options = {}) {
+    const ignoredTags = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
+
+    function handleKeydown(event) {
+        // Check if shortcuts are enabled
+        if (options.enabled !== undefined && !unref(options.enabled)) {
+            return;
+        }
+
+        // Skip when focus is inside form elements or contenteditable
+        const target = event.target;
+        if (target && (ignoredTags.has(target.tagName) || target.isContentEditable)) {
+            return;
+        }
+
+        // Skip if modifier keys are held (allow shift for ? and similar)
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+
+        const key = event.key;
+        const handler = shortcuts[key];
+
+        if (handler && typeof handler === 'function') {
+            event.preventDefault();
+            handler(event);
+        }
+    }
+
+    onMounted(() => {
+        document.addEventListener('keydown', handleKeydown);
+    });
+
+    onUnmounted(() => {
+        document.removeEventListener('keydown', handleKeydown);
+    });
+}

package/src/composables/useMentions.js

@@ -0,0 +1,134 @@
+import { ref, onUnmounted } from 'vue';
+
+/**
+ * Composable that detects `@` typed in a text input/textarea,
+ * fetches agent suggestions from the API (debounced), and provides
+ * an insert function to replace the mention token.
+ *
+ * @param {Object} options
+ * @param {string} [options.searchEndpoint] - API endpoint for agent search (default: route-based)
+ * @param {number} [options.debounce=250] - Debounce delay in ms
+ * @returns {Object}
+ */
+export function useMentions(options = {}) {
+    const { debounce = 250 } = options;
+
+    const suggestions = ref([]);
+    const isActive = ref(false);
+    const query = ref('');
+    const mentionStart = ref(null); // cursor position where `@` was typed
+    const loading = ref(false);
+
+    let timer = null;
+
+    function clearTimer() {
+        if (timer !== null) {
+            window.clearTimeout(timer);
+            timer = null;
+        }
+    }
+
+    /**
+     * Call this on every input/keyup event with the textarea element
+     * and the current text value.
+     */
+    function onTextChange(textareaEl, text) {
+        if (!textareaEl) return;
+
+        const cursorPos = textareaEl.selectionStart;
+        const textBeforeCursor = text.slice(0, cursorPos);
+
+        // Find the last `@` that starts a mention (preceded by whitespace or start of string)
+        const mentionMatch = textBeforeCursor.match(/(?:^|[\s(])@([a-zA-Z0-9_ ]*)$/);
+
+        if (mentionMatch) {
+            const searchQuery = mentionMatch[1];
+            // The @ is at cursorPos minus the matched group minus 1 for the @
+            mentionStart.value = cursorPos - searchQuery.length - 1;
+            query.value = searchQuery;
+            isActive.value = true;
+            debouncedFetch(searchQuery);
+        } else {
+            close();
+        }
+    }
+
+    function debouncedFetch(searchQuery) {
+        clearTimer();
+
+        if (searchQuery.length < 1) {
+            fetchSuggestions('');
+            return;
+        }
+
+        timer = window.setTimeout(() => {
+            fetchSuggestions(searchQuery);
+        }, debounce);
+    }
+
+    async function fetchSuggestions(searchQuery) {
+        loading.value = true;
+        try {
+            const endpoint = options.searchEndpoint || '/support/admin/agents/search';
+            const url = `${endpoint}?q=${encodeURIComponent(searchQuery)}`;
+            const response = await fetch(url, {
+                headers: {
+                    Accept: 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+                },
+            });
+            if (response.ok) {
+                suggestions.value = await response.json();
+            } else {
+                suggestions.value = [];
+            }
+        } catch {
+            suggestions.value = [];
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    /**
+     * Insert the selected agent mention into the text.
+     * Returns the new text value with the mention inserted.
+     *
+     * @param {string} currentText - Current textarea value
+     * @param {Object} agent - Agent object with `name` property
+     * @returns {string} Updated text
+     */
+    function insertMention(currentText, agent) {
+        if (mentionStart.value === null) return currentText;
+
+        const before = currentText.slice(0, mentionStart.value);
+        const cursorPos = mentionStart.value + 1 + query.value.length;
+        const after = currentText.slice(cursorPos);
+
+        const mentionText = `@{${agent.name}} `;
+        const newText = before + mentionText + after;
+
+        close();
+        return newText;
+    }
+
+    function close() {
+        isActive.value = false;
+        suggestions.value = [];
+        query.value = '';
+        mentionStart.value = null;
+        clearTimer();
+    }
+
+    onUnmounted(clearTimer);
+
+    return {
+        suggestions,
+        isActive,
+        query,
+        loading,
+        onTextChange,
+        insertMention,
+        close,
+    };
+}