@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/pages/Guest/Show.vue

@@ -1,93 +1,124 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import StatusBadge from '../../components/StatusBadge.vue';
-import PriorityBadge from '../../components/PriorityBadge.vue';
-import ReplyThread from '../../components/ReplyThread.vue';
-import AttachmentList from '../../components/AttachmentList.vue';
-import SatisfactionRating from '../../components/SatisfactionRating.vue';
-import { useForm } from '@inertiajs/vue3';
-import { ref } from 'vue';
-
-const props = defineProps({ ticket: Object, token: String });
-
-const isResolved = ['resolved', 'closed'].includes(props.ticket.status);
-
-const replyForm = useForm({ body: '', attachments: [] });
-const showCopied = ref(false);
-
-function submitReply() {
-    replyForm.post(route('escalated.guest.tickets.reply', props.token), {
-        onSuccess: () => replyForm.reset(),
-    });
-}
-
-function copyLink() {
-    navigator.clipboard.writeText(window.location.href);
-    showCopied.value = true;
-    setTimeout(() => showCopied.value = false, 2000);
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="ticket.subject">
-        <div class="mx-auto max-w-3xl">
-            <!-- Bookmark notice -->
-            <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
-                <div class="flex items-start gap-3">
-                    <svg class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
-                    <div>
-                        <p class="text-sm font-medium text-amber-800">Bookmark this page</p>
-                        <p class="mt-0.5 text-xs text-amber-600">This is your private link to view and reply to this ticket.</p>
-                    </div>
-                    <button @click="copyLink"
-                            class="ml-auto shrink-0 rounded-md border border-amber-300 bg-white px-2.5 py-1 text-xs font-medium text-amber-700 hover:bg-amber-50">
-                        {{ showCopied ? 'Copied!' : 'Copy Link' }}
-                    </button>
-                </div>
-            </div>
-
-            <!-- Ticket header -->
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-                <span class="font-mono text-sm text-gray-500">{{ ticket.reference }}</span>
-                <StatusBadge :status="ticket.status" />
-                <PriorityBadge :priority="ticket.priority" />
-                <span v-if="ticket.department" class="text-sm text-gray-500">{{ ticket.department.name }}</span>
-            </div>
-
-            <!-- CSAT Rating -->
-            <SatisfactionRating v-if="isResolved && !ticket.satisfaction_rating"
-                                :action="route('escalated.guest.tickets.rate', token)" />
-
-            <!-- Description -->
-            <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4">
-                <p class="whitespace-pre-wrap text-sm text-gray-700">{{ ticket.description }}</p>
-                <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
-            </div>
-
-            <!-- Replies -->
-            <div class="mb-6">
-                <h2 class="mb-4 text-lg font-semibold text-gray-900">Replies</h2>
-                <ReplyThread :replies="ticket.replies || []" />
-            </div>
-
-            <!-- Reply form -->
-            <div v-if="ticket.status !== 'closed'" class="rounded-lg border border-gray-200 bg-white p-4">
-                <h2 class="mb-4 text-lg font-semibold text-gray-900">Reply</h2>
-                <form @submit.prevent="submitReply">
-                    <textarea v-model="replyForm.body" rows="4" required placeholder="Write your reply..."
-                              class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
-                    <div v-if="replyForm.errors.body" class="mt-1 text-sm text-red-600">{{ replyForm.errors.body }}</div>
-                    <div class="mt-3 flex justify-end">
-                        <button type="submit" :disabled="replyForm.processing"
-                                class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
-                            {{ replyForm.processing ? 'Sending...' : 'Send Reply' }}
-                        </button>
-                    </div>
-                </form>
-            </div>
-            <div v-else class="rounded-lg border border-gray-200 bg-gray-50 px-4 py-6 text-center text-sm text-gray-500">
-                This ticket is closed. No further replies can be added.
-            </div>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import StatusBadge from '../../components/StatusBadge.vue';
+import PriorityBadge from '../../components/PriorityBadge.vue';
+import ReplyThread from '../../components/ReplyThread.vue';
+import AttachmentList from '../../components/AttachmentList.vue';
+import SatisfactionRating from '../../components/SatisfactionRating.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({ ticket: Object, token: String });
+
+const isResolved = ['resolved', 'closed'].includes(props.ticket.status);
+
+const replyForm = useForm({ body: '', attachments: [] });
+const showCopied = ref(false);
+
+function submitReply() {
+    replyForm.post(route('escalated.guest.tickets.reply', props.token), {
+        onSuccess: () => replyForm.reset(),
+    });
+}
+
+function copyLink() {
+    navigator.clipboard.writeText(window.location.href);
+    showCopied.value = true;
+    setTimeout(() => (showCopied.value = false), 2000);
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="ticket.subject">
+        <div class="mx-auto max-w-3xl">
+            <!-- Bookmark notice -->
+            <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+                <div class="flex items-start gap-3">
+                    <svg
+                        class="mt-0.5 h-5 w-5 shrink-0 text-amber-500"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                        />
+                    </svg>
+                    <div>
+                        <p class="text-sm font-medium text-amber-800">Bookmark this page</p>
+                        <p class="mt-0.5 text-xs text-amber-600">
+                            This is your private link to view and reply to this ticket.
+                        </p>
+                    </div>
+                    <button
+                        class="ml-auto shrink-0 rounded-md border border-amber-300 bg-white px-2.5 py-1 text-xs font-medium text-amber-700 hover:bg-amber-50"
+                        @click="copyLink"
+                    >
+                        {{ showCopied ? 'Copied!' : 'Copy Link' }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- Ticket header -->
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+                <span class="font-mono text-sm text-gray-500">{{ ticket.reference }}</span>
+                <StatusBadge :status="ticket.status" />
+                <PriorityBadge :priority="ticket.priority" />
+                <span v-if="ticket.department" class="text-sm text-gray-500">{{ ticket.department.name }}</span>
+            </div>
+
+            <!-- CSAT Rating -->
+            <SatisfactionRating
+                v-if="isResolved && !ticket.satisfaction_rating"
+                :action="route('escalated.guest.tickets.rate', token)"
+            />
+
+            <!-- Description -->
+            <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4">
+                <p class="whitespace-pre-wrap text-sm text-gray-700">{{ ticket.description }}</p>
+                <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
+            </div>
+
+            <!-- Replies -->
+            <div class="mb-6">
+                <h2 class="mb-4 text-lg font-semibold text-gray-900">Replies</h2>
+                <ReplyThread :replies="ticket.replies || []" />
+            </div>
+
+            <!-- Reply form -->
+            <div v-if="ticket.status !== 'closed'" class="rounded-lg border border-gray-200 bg-white p-4">
+                <h2 class="mb-4 text-lg font-semibold text-gray-900">Reply</h2>
+                <form @submit.prevent="submitReply">
+                    <textarea
+                        v-model="replyForm.body"
+                        rows="4"
+                        required
+                        placeholder="Write your reply..."
+                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                    ></textarea>
+                    <div v-if="replyForm.errors.body" class="mt-1 text-sm text-red-600">
+                        {{ replyForm.errors.body }}
+                    </div>
+                    <div class="mt-3 flex justify-end">
+                        <button
+                            type="submit"
+                            :disabled="replyForm.processing"
+                            class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+                        >
+                            {{ replyForm.processing ? 'Sending...' : 'Send Reply' }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <div
+                v-else
+                class="rounded-lg border border-gray-200 bg-gray-50 px-4 py-6 text-center text-sm text-gray-500"
+            >
+                This ticket is closed. No further replies can be added.
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/plugin.js

@@ -17,6 +17,8 @@ import { markRaw } from 'vue';
  */
 export const EscalatedPlugin = {
     install(app, options = {}) {
+        installRouteShim();
+
         if (options.layout) {
             app.provide('escalated-layout', markRaw(options.layout));
         }
@@ -24,10 +26,43 @@ export const EscalatedPlugin = {
         if (options.theme) {
             app.provide('escalated-theme', options.theme);
             applyTheme(options.theme);
+
+            if (options.theme.panel) {
+                const panelConfig = options.theme.panel;
+                applyPanelTheme(panelConfig);
+                app.provide('escalated-panel', {
+                    appName: panelConfig.appName || 'Escalated',
+                    logo: panelConfig.logo || null,
+                    mode: panelConfig.mode || 'dark',
+                });
+            }
         }
     },
 };
 
+// 77 components in this package call the Ziggy `route()` helper (Laravel's
+// named-route URL generator). Laravel hosts ship Ziggy and get `window.route`
+// for free; other host frameworks (Rails, Django, NestJS, Phoenix, Symfony,
+// Adonis, Go, .NET, Spring, WordPress) don't, and the call sites would
+// otherwise throw a bare ReferenceError deep inside a component render with
+// no hint at the cause.
+//
+// Install a stub that throws an informative error instead, so the host app's
+// first failing request points at the actual missing dependency. Laravel hosts
+// that already have Ziggy loaded are left alone.
+function installRouteShim() {
+    if (typeof window === 'undefined') return;
+    if (typeof window.route === 'function') return;
+
+    window.route = function escalatedRouteShimMissing(name) {
+        throw new Error(
+            `[escalated] window.route('${name}') called, but no \`route()\` helper is installed on this host. ` +
+                `The escalated agent/admin UI depends on Laravel's Ziggy-style \`route(name, params)\` helper. ` +
+                `Install Ziggy (on Laravel hosts) or register a compatible shim on window.route before mounting the app.`,
+        );
+    };
+}
+
 const themeDefaults = {
     primary: '#4f46e5',
     primaryHover: null,
@@ -55,7 +90,7 @@ function darken(hex, percent) {
     const r = Math.max(0, (num >> 16) - Math.round(2.55 * percent));
     const g = Math.max(0, ((num >> 8) & 0x00ff) - Math.round(2.55 * percent));
     const b = Math.max(0, (num & 0x0000ff) - Math.round(2.55 * percent));
-    return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
 }
 
 function scaleBorderRadius(radius, factor) {
@@ -63,3 +98,78 @@ function scaleBorderRadius(radius, factor) {
     if (!match) return radius;
     return `${(parseFloat(match[1]) * factor).toFixed(2)}${match[2] || 'rem'}`;
 }
+
+const panelDarkDefaults = {
+    bg: '#000000',
+    sidebarBg: '#0a0a0a',
+    topbarBg: 'rgba(0,0,0,0.8)',
+    surface: 'rgba(23,23,23,0.6)',
+    surfaceAlt: '#0a0a0a',
+    border: 'rgba(255,255,255,0.06)',
+    borderInput: 'rgba(255,255,255,0.1)',
+    text: '#ffffff',
+    textSecondary: '#e5e5e5',
+    textTertiary: '#a3a3a3',
+    textMuted: '#737373',
+    accent: '#06b6d4',
+    accentSecondary: '#8b5cf6',
+    accentHover: '#22d3ee',
+    accentSecondaryHover: '#a78bfa',
+    hover: 'rgba(255,255,255,0.03)',
+    active: 'rgba(255,255,255,0.08)',
+};
+
+const panelLightDefaults = {
+    bg: '#f9fafb',
+    sidebarBg: '#ffffff',
+    topbarBg: 'rgba(255,255,255,0.95)',
+    surface: '#ffffff',
+    surfaceAlt: '#f9fafb',
+    border: '#e5e7eb',
+    borderInput: '#d1d5db',
+    text: '#111827',
+    textSecondary: '#374151',
+    textTertiary: '#6b7280',
+    textMuted: '#9ca3af',
+    accent: '#3b82f6',
+    accentSecondary: '#6366f1',
+    accentHover: '#2563eb',
+    accentSecondaryHover: '#818cf8',
+    hover: 'rgba(0,0,0,0.02)',
+    active: '#eff6ff',
+};
+
+const panelTokenMap = {
+    bg: '--esc-panel-bg',
+    sidebarBg: '--esc-panel-sidebar-bg',
+    topbarBg: '--esc-panel-topbar-bg',
+    surface: '--esc-panel-surface',
+    surfaceAlt: '--esc-panel-surface-alt',
+    border: '--esc-panel-border',
+    borderInput: '--esc-panel-border-input',
+    text: '--esc-panel-text',
+    textSecondary: '--esc-panel-text-secondary',
+    textTertiary: '--esc-panel-text-tertiary',
+    textMuted: '--esc-panel-text-muted',
+    accent: '--esc-panel-accent',
+    accentSecondary: '--esc-panel-accent-secondary',
+    accentHover: '--esc-panel-accent-hover',
+    accentSecondaryHover: '--esc-panel-accent-secondary-hover',
+    hover: '--esc-panel-hover',
+    active: '--esc-panel-active',
+};
+
+function applyPanelTheme(panelConfig) {
+    const defaults = panelConfig.mode === 'light' ? panelLightDefaults : panelDarkDefaults;
+    const overrides = {};
+    for (const key of Object.keys(panelTokenMap)) {
+        if (panelConfig[key] !== undefined) {
+            overrides[key] = panelConfig[key];
+        }
+    }
+    const merged = { ...defaults, ...overrides };
+    const style = document.documentElement.style;
+    for (const [key, cssVar] of Object.entries(panelTokenMap)) {
+        style.setProperty(cssVar, merged[key]);
+    }
+}

package/src/utils/constants.js

@@ -0,0 +1,30 @@
+/**
+ * Shared ticket constants used across multiple components.
+ * Single source of truth for statuses, priorities, and types.
+ */
+
+export const TICKET_STATUSES = [
+    'open',
+    'in_progress',
+    'waiting_on_customer',
+    'waiting_on_agent',
+    'escalated',
+    'resolved',
+    'closed',
+];
+
+export const TICKET_PRIORITIES = ['low', 'medium', 'high', 'urgent', 'critical'];
+
+export const TICKET_TYPES = [
+    { value: 'question', label: 'Question', color: 'text-cyan-400' },
+    { value: 'problem', label: 'Problem', color: 'text-rose-400' },
+    { value: 'incident', label: 'Incident', color: 'text-amber-400' },
+    { value: 'task', label: 'Task', color: 'text-violet-400' },
+];
+
+export const TICKET_TYPE_COLORS = {
+    question: { dark: 'bg-cyan-500/20 text-cyan-400', light: 'bg-cyan-100 text-cyan-700' },
+    problem: { dark: 'bg-rose-500/20 text-rose-400', light: 'bg-rose-100 text-rose-700' },
+    incident: { dark: 'bg-amber-500/20 text-amber-400', light: 'bg-amber-100 text-amber-700' },
+    task: { dark: 'bg-violet-500/20 text-violet-400', light: 'bg-violet-100 text-violet-700' },
+};

package/src/utils/formatting.js

@@ -0,0 +1,35 @@
+/**
+ * Shared formatting utilities for ticket display.
+ */
+
+/**
+ * Returns a human-readable relative time string (e.g. "5m ago", "3h ago", "2d ago").
+ * @param {string|Date} date
+ * @returns {string}
+ */
+export function timeAgo(date) {
+    if (!date) return '';
+    const diff = Date.now() - new Date(date).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+}
+
+/**
+ * Returns a Tailwind CSS class for the SLA indicator dot based on ticket SLA state.
+ * @param {Object} ticket
+ * @returns {string}
+ */
+export function slaClass(ticket) {
+    if (ticket.sla_first_response_breached || ticket.sla_resolution_breached) return 'bg-rose-500';
+    if (ticket.first_response_due_at || ticket.resolution_due_at) {
+        const due = ticket.resolution_due_at || ticket.first_response_due_at;
+        const mins = (new Date(due) - Date.now()) / 60000;
+        if (mins < 30) return 'bg-amber-500';
+        return 'bg-emerald-500';
+    }
+    return '';
+}

package/src/utils/mentionHighlight.js

@@ -0,0 +1,24 @@
+/**
+ * HTML-encode a string to prevent injection via mention names.
+ */
+function escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/**
+ * Replace @{Name} patterns in text with styled mention badges.
+ *
+ * @param {string} html - The HTML or text content
+ * @param {boolean} dark - Whether dark mode is active
+ * @returns {string} HTML with mentions wrapped in styled spans
+ */
+export function highlightMentions(html, dark = false) {
+    if (!html) return '';
+
+    const pillClass = dark
+        ? 'inline-flex items-center rounded-full bg-cyan-500/15 px-1.5 py-0.5 text-xs font-medium text-cyan-400 ring-1 ring-cyan-500/20'
+        : 'inline-flex items-center rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 ring-1 ring-blue-200';
+
+    // Replace @{Name} with styled pill, encoding the name to prevent injection
+    return html.replace(/@\{([^}]+)\}/g, (match, name) => `<span class="${pillClass}">@${escapeHtml(name)}</span>`);
+}

package/src/utils/sanitizeHtml.js

@@ -1,64 +1,78 @@
-/**
- * Sanitize HTML to prevent stored XSS.
- *
- * Uses the DOM parser to walk the tree and strip dangerous elements and
- * attributes rather than regex, which avoids incomplete-sanitization pitfalls.
- */
-
-const DANGEROUS_TAGS = new Set([
-  'script', 'style', 'iframe', 'object', 'embed', 'form', 'input',
-  'textarea', 'button', 'select', 'option', 'link', 'meta', 'base',
-  'applet', 'noscript', 'noframes',
-])
-
-const URI_ATTRS = new Set(['href', 'src', 'action', 'formaction', 'xlink:href'])
-
-export function sanitizeHtml(html) {
-  if (!html) return ''
-
-  const doc = new DOMParser().parseFromString(html, 'text/html')
-
-  // Remove dangerous elements
-  for (const tag of DANGEROUS_TAGS) {
-    const els = doc.body.getElementsByTagName(tag)
-    while (els.length) els[0].remove()
-  }
-
-  // Walk all remaining elements and strip dangerous attributes
-  const all = doc.body.querySelectorAll('*')
-  for (let i = 0; i < all.length; i++) {
-    const el = all[i]
-    const attrs = [...el.attributes]
-    for (let j = 0; j < attrs.length; j++) {
-      const name = attrs[j].name.toLowerCase()
-
-      // Remove event handlers (onclick, onerror, etc.)
-      if (name.startsWith('on')) {
-        el.removeAttribute(attrs[j].name)
-        continue
-      }
-
-      // Remove javascript: / vbscript: / dangerous data: URIs
-      if (URI_ATTRS.has(name)) {
-        const val = (attrs[j].value || '').replace(/[\s\u0000-\u001F]+/g, '').toLowerCase()
-        if (
-          val.startsWith('javascript:') ||
-          val.startsWith('vbscript:') ||
-          (val.startsWith('data:') && !val.startsWith('data:image/'))
-        ) {
-          el.removeAttribute(attrs[j].name)
-        }
-      }
-
-      // Remove style attributes containing expressions or javascript
-      if (name === 'style') {
-        const val = (attrs[j].value || '').toLowerCase()
-        if (val.includes('expression(') || val.includes('javascript:') || val.includes('url(')) {
-          el.removeAttribute(attrs[j].name)
-        }
-      }
-    }
-  }
-
-  return doc.body.innerHTML
-}
+/**
+ * Sanitize HTML to prevent stored XSS.
+ *
+ * Uses the DOM parser to walk the tree and strip dangerous elements and
+ * attributes rather than regex, which avoids incomplete-sanitization pitfalls.
+ */
+
+const DANGEROUS_TAGS = new Set([
+    'script',
+    'style',
+    'iframe',
+    'object',
+    'embed',
+    'form',
+    'input',
+    'textarea',
+    'button',
+    'select',
+    'option',
+    'link',
+    'meta',
+    'base',
+    'applet',
+    'noscript',
+    'noframes',
+]);
+
+const URI_ATTRS = new Set(['href', 'src', 'action', 'formaction', 'xlink:href']);
+
+export function sanitizeHtml(html) {
+    if (!html) return '';
+
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+
+    // Remove dangerous elements
+    for (const tag of DANGEROUS_TAGS) {
+        const els = doc.body.getElementsByTagName(tag);
+        while (els.length) els[0].remove();
+    }
+
+    // Walk all remaining elements and strip dangerous attributes
+    const all = doc.body.querySelectorAll('*');
+    for (let i = 0; i < all.length; i++) {
+        const el = all[i];
+        const attrs = [...el.attributes];
+        for (let j = 0; j < attrs.length; j++) {
+            const name = attrs[j].name.toLowerCase();
+
+            // Remove event handlers (onclick, onerror, etc.)
+            if (name.startsWith('on')) {
+                el.removeAttribute(attrs[j].name);
+                continue;
+            }
+
+            // Remove javascript: / vbscript: / dangerous data: URIs
+            if (URI_ATTRS.has(name)) {
+                const val = (attrs[j].value || '').replace(/[\s\u0000-\u001F]+/g, '').toLowerCase();
+                if (
+                    val.startsWith('javascript:') ||
+                    val.startsWith('vbscript:') ||
+                    (val.startsWith('data:') && !val.startsWith('data:image/'))
+                ) {
+                    el.removeAttribute(attrs[j].name);
+                }
+            }
+
+            // Remove style attributes containing expressions or javascript
+            if (name === 'style') {
+                const val = (attrs[j].value || '').toLowerCase();
+                if (val.includes('expression(') || val.includes('javascript:') || val.includes('url(')) {
+                    el.removeAttribute(attrs[j].name);
+                }
+            }
+        }
+    }
+
+    return doc.body.innerHTML;
+}