@escalated-dev/escalated 0.7.0 → 0.7.1

package/src/components/PluginSlot.vue

@@ -1,62 +1,68 @@
-<script setup>
-import { defineAsyncComponent, h } from 'vue';
-
-const props = defineProps({
-    slot: {
-        type: String,
-        required: true,
-    },
-    components: {
-        type: Array,
-        default: () => [],
-    },
-});
-
-// Error fallback component rendered when a plugin component fails to load
-const ErrorFallback = {
-    props: ['error', 'plugin', 'component'],
-    render() {
-        return h('div', {
-            class: 'rounded-lg border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-xs text-rose-400',
-        }, `Plugin "${this.plugin}" failed to load component "${this.component}"`);
-    },
-};
-
-// Loading placeholder component
-const LoadingFallback = {
-    render() {
-        return h('div', {
-            class: 'animate-pulse rounded-lg bg-white/[0.03] px-3 py-2',
-        }, [
-            h('div', { class: 'h-4 w-24 rounded bg-white/[0.06]' }),
-        ]);
-    },
-};
-
-// Load plugin components dynamically from host app's plugins directory
-const loadPluginComponent = (plugin, component) => {
-    return defineAsyncComponent({
-        loader: () => import(`../../../../plugins/escalated/${plugin}/resources/js/Components/${component}.vue`),
-        loadingComponent: LoadingFallback,
-        errorComponent: {
-            props: ['error'],
-            render() {
-                return h(ErrorFallback, { error: this.error, plugin, component });
-            },
-        },
-        delay: 100,
-        timeout: 10000,
-    });
-};
-</script>
-
-<template>
-    <template v-if="components?.length > 0">
-        <component
-            v-for="(pluginComp, index) in components"
-            :key="`${slot}-${pluginComp.plugin}-${pluginComp.component}-${index}`"
-            :is="loadPluginComponent(pluginComp.plugin, pluginComp.component)"
-            v-bind="pluginComp.data || {}"
-        />
-    </template>
-</template>
+<script setup>
+import { defineAsyncComponent, h } from 'vue';
+
+defineProps({
+    slot: {
+        type: String,
+        required: true,
+    },
+    components: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+// Error fallback component rendered when a plugin component fails to load
+const ErrorFallback = {
+    props: ['error', 'plugin', 'component'],
+    render() {
+        return h(
+            'div',
+            {
+                class: 'rounded-lg border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-xs text-rose-400',
+            },
+            `Plugin "${this.plugin}" failed to load component "${this.component}"`,
+        );
+    },
+};
+
+// Loading placeholder component
+const LoadingFallback = {
+    render() {
+        return h(
+            'div',
+            {
+                class: 'animate-pulse rounded-lg bg-white/[0.03] px-3 py-2',
+            },
+            [h('div', { class: 'h-4 w-24 rounded bg-white/[0.06]' })],
+        );
+    },
+};
+
+// Load plugin components dynamically from host app's plugins directory
+const loadPluginComponent = (plugin, component) => {
+    return defineAsyncComponent({
+        loader: () => import(`../../../../plugins/escalated/${plugin}/resources/js/Components/${component}.vue`),
+        loadingComponent: LoadingFallback,
+        errorComponent: {
+            props: ['error'],
+            render() {
+                return h(ErrorFallback, { error: this.error, plugin, component });
+            },
+        },
+        delay: 100,
+        timeout: 10000,
+    });
+};
+</script>
+
+<template>
+    <template v-if="components?.length > 0">
+        <component
+            :is="loadPluginComponent(pluginComp.plugin, pluginComp.component)"
+            v-for="(pluginComp, index) in components"
+            :key="`${slot}-${pluginComp.plugin}-${pluginComp.component}-${index}`"
+            v-bind="pluginComp.data || {}"
+        />
+    </template>
+</template>

package/src/components/PresenceIndicator.vue

@@ -3,12 +3,14 @@ import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
 
 const props = defineProps({
     ticketReference: { type: String, required: true },
+    ticketId: { type: [Number, String], default: null },
     routePrefix: { type: String, required: true },
     pollInterval: { type: Number, default: 30000 },
     showLabel: { type: Boolean, default: false },
 });
 
 const effectiveInterval = computed(() => Math.max(props.pollInterval, 5000));
+const echoAvailable = typeof window !== 'undefined' && !!window.Echo;
 
 const escDark = inject(
     'esc-dark',
@@ -17,6 +19,7 @@ const escDark = inject(
 const viewers = ref([]);
 const hovering = ref(false);
 let intervalId = null;
+let presenceChannel = null;
 
 async function fetchPresence() {
     try {
@@ -38,6 +41,35 @@ async function fetchPresence() {
     }
 }
 
+/**
+ * Use Echo presence channel for real-time viewer tracking when available.
+ * Falls back to polling when Echo is not configured.
+ */
+function initPresenceChannel() {
+    if (!echoAvailable || !props.ticketId) return false;
+
+    try {
+        presenceChannel = window.Echo.join(`escalated.tickets.${props.ticketId}`);
+
+        presenceChannel
+            .here((users) => {
+                viewers.value = users;
+            })
+            .joining((user) => {
+                if (!viewers.value.find((v) => v.id === user.id)) {
+                    viewers.value = [...viewers.value, user];
+                }
+            })
+            .leaving((user) => {
+                viewers.value = viewers.value.filter((v) => v.id !== user.id);
+            });
+
+        return true;
+    } catch {
+        return false;
+    }
+}
+
 const tooltipText = computed(() => {
     if (!viewers.value.length) return '';
     const names = viewers.value.map((v) => v.name);
@@ -68,8 +100,12 @@ function getColor(index) {
 }
 
 onMounted(() => {
-    fetchPresence();
-    intervalId = setInterval(fetchPresence, effectiveInterval.value);
+    // Prefer presence channels via Echo; fall back to polling
+    const usingEcho = initPresenceChannel();
+    if (!usingEcho) {
+        fetchPresence();
+        intervalId = setInterval(fetchPresence, effectiveInterval.value);
+    }
 });
 
 onUnmounted(() => {
@@ -77,6 +113,14 @@ onUnmounted(() => {
         clearInterval(intervalId);
         intervalId = null;
     }
+    if (presenceChannel && props.ticketId) {
+        try {
+            window.Echo.leave(`escalated.tickets.${props.ticketId}`);
+        } catch {
+            // ignore
+        }
+        presenceChannel = null;
+    }
 });
 </script>
 

package/src/components/PriorityBadge.stories.js

@@ -1,33 +1,33 @@
-import PriorityBadge from './PriorityBadge.vue';
-
-export default {
-    title: 'Components/PriorityBadge',
-    component: PriorityBadge,
-    argTypes: {
-        priority: {
-            control: 'select',
-            options: ['low', 'medium', 'high', 'urgent', 'critical'],
-        },
-    },
-};
-
-export const Low = { args: { priority: 'low' } };
-export const Medium = { args: { priority: 'medium' } };
-export const High = { args: { priority: 'high' } };
-export const Urgent = { args: { priority: 'urgent' } };
-export const Critical = { args: { priority: 'critical' } };
-
-export const AllPriorities = {
-    render: () => ({
-        components: { PriorityBadge },
-        template: `
-            <div class="flex flex-wrap items-center gap-2">
-                <PriorityBadge priority="low" />
-                <PriorityBadge priority="medium" />
-                <PriorityBadge priority="high" />
-                <PriorityBadge priority="urgent" />
-                <PriorityBadge priority="critical" />
-            </div>
-        `,
-    }),
-};
+import PriorityBadge from './PriorityBadge.vue';
+
+export default {
+    title: 'Components/PriorityBadge',
+    component: PriorityBadge,
+    argTypes: {
+        priority: {
+            control: 'select',
+            options: ['low', 'medium', 'high', 'urgent', 'critical'],
+        },
+    },
+};
+
+export const Low = { args: { priority: 'low' } };
+export const Medium = { args: { priority: 'medium' } };
+export const High = { args: { priority: 'high' } };
+export const Urgent = { args: { priority: 'urgent' } };
+export const Critical = { args: { priority: 'critical' } };
+
+export const AllPriorities = {
+    render: () => ({
+        components: { PriorityBadge },
+        template: `
+            <div class="flex flex-wrap items-center gap-2">
+                <PriorityBadge priority="low" />
+                <PriorityBadge priority="medium" />
+                <PriorityBadge priority="high" />
+                <PriorityBadge priority="urgent" />
+                <PriorityBadge priority="critical" />
+            </div>
+        `,
+    }),
+};

package/src/components/PriorityBadge.vue

@@ -1,46 +1,46 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-const props = defineProps({
-    priority: { type: String, required: true },
-});
-
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-
-const darkConfig = {
-    low: { label: 'Low', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
-    medium: { label: 'Medium', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
-    high: { label: 'High', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
-    urgent: { label: 'Urgent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
-    critical: { label: 'Critical', color: 'bg-rose-500/10 text-rose-300 ring-1 ring-rose-500/20' },
-};
-
-const lightConfig = {
-    low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
-    medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
-    high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
-    urgent: { label: 'Urgent', color: 'bg-orange-100 text-orange-800' },
-    critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
-};
-
-const config = computed(() => {
-    const map = escDark.value ? darkConfig : lightConfig;
-    const fallback = escDark.value
-        ? { label: props.priority, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' }
-        : { label: props.priority, color: 'bg-gray-100 text-gray-800' };
-    return map[props.priority] || fallback;
-});
-</script>
-
-<template>
-    <span
-        role="status"
-        :aria-label="'Priority: ' + config.label"
-        :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]"
-    >
-        {{ config.label }}
-    </span>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+
+const props = defineProps({
+    priority: { type: String, required: true },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const darkConfig = {
+    low: { label: 'Low', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
+    medium: { label: 'Medium', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+    high: { label: 'High', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
+    urgent: { label: 'Urgent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
+    critical: { label: 'Critical', color: 'bg-rose-500/10 text-rose-300 ring-1 ring-rose-500/20' },
+};
+
+const lightConfig = {
+    low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
+    medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
+    high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
+    urgent: { label: 'Urgent', color: 'bg-orange-100 text-orange-800' },
+    critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
+};
+
+const config = computed(() => {
+    const map = escDark.value ? darkConfig : lightConfig;
+    const fallback = escDark.value
+        ? { label: props.priority, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' }
+        : { label: props.priority, color: 'bg-gray-100 text-gray-800' };
+    return map[props.priority] || fallback;
+});
+</script>
+
+<template>
+    <span
+        role="status"
+        :aria-label="'Priority: ' + config.label"
+        :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]"
+    >
+        {{ config.label }}
+    </span>
+</template>

package/src/components/ReplyComposer.vue

@@ -2,6 +2,8 @@
 import { ref, computed, inject } from 'vue';
 import { router } from '@inertiajs/vue3';
 import FileDropzone from './FileDropzone.vue';
+import MentionDropdown from './MentionDropdown.vue';
+import { useMentions } from '../composables/useMentions';
 
 const props = defineProps({
     action: { type: String, required: true },
@@ -22,6 +24,35 @@ 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();
+}
+
+function handleMentionKeydown(e) {
+    if (mentionActive.value && mentionDropdownRef.value) {
+        const handled = mentionDropdownRef.value.onKeydown(e);
+        if (handled) return;
+    }
+}
 
 // Typing indicator: debounced POST every 5 seconds while typing
 let lastTypingSent = 0;
@@ -143,15 +174,31 @@ const buttonLabel = computed(() => {
             This note is only visible to agents.
         </div>
 
-        <textarea
-            v-model="body"
-            rows="4"
-            :placeholder="placeholder"
-            aria-label="Reply message"
-            class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
-            @keydown="onTyping"
-            @blur="onBlur"
-        ></textarea>
+        <div class="relative">
+            <textarea
+                ref="textareaRef"
+                v-model="body"
+                rows="4"
+                :placeholder="placeholder"
+                aria-label="Reply message"
+                class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @keydown="
+                    handleMentionKeydown($event);
+                    onTyping();
+                "
+                @input="onMentionInput"
+                @blur="onBlur"
+            ></textarea>
+            <MentionDropdown
+                ref="mentionDropdownRef"
+                :suggestions="suggestions"
+                :visible="mentionActive"
+                :loading="mentionLoading"
+                class="bottom-0 left-0 translate-y-full"
+                @select="handleMentionSelect"
+                @close="closeMentions"
+            />
+        </div>
 
         <FileDropzone class="mt-2" @files="handleFiles" />
 
@@ -222,15 +269,31 @@ const buttonLabel = computed(() => {
             This note is only visible to agents.
         </div>
 
-        <textarea
-            v-model="body"
-            rows="4"
-            :placeholder="placeholder"
-            aria-label="Reply message"
-            class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-            @keydown="onTyping"
-            @blur="onBlur"
-        ></textarea>
+        <div class="relative">
+            <textarea
+                ref="textareaRef"
+                v-model="body"
+                rows="4"
+                :placeholder="placeholder"
+                aria-label="Reply message"
+                class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                @keydown="
+                    handleMentionKeydown($event);
+                    onTyping();
+                "
+                @input="onMentionInput"
+                @blur="onBlur"
+            ></textarea>
+            <MentionDropdown
+                ref="mentionDropdownRef"
+                :suggestions="suggestions"
+                :visible="mentionActive"
+                :loading="mentionLoading"
+                class="bottom-0 left-0 translate-y-full"
+                @select="handleMentionSelect"
+                @close="closeMentions"
+            />
+        </div>
 
         <FileDropzone class="mt-2" @files="handleFiles" />
 

package/src/components/ReplyThread.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { inject, computed } from 'vue';
+import { ref, inject, computed } from 'vue';
 import { router } from '@inertiajs/vue3';
 import AttachmentList from './AttachmentList.vue';
+import TicketSplitDialog from './TicketSplitDialog.vue';
 import { sanitizeHtml } from '../utils/sanitizeHtml';
+import { highlightMentions } from '../utils/mentionHighlight';
 import { useI18n } from '../composables/useI18n';
 
 const props = defineProps({
@@ -11,8 +13,24 @@ const props = defineProps({
     ticketReference: { type: String, default: '' },
     routePrefix: { type: String, default: '' },
     pinnable: { type: Boolean, default: false },
+    splittable: { type: Boolean, default: false },
 });
 
+const splitReply = ref(null);
+
+function openSplitDialog(reply) {
+    splitReply.value = reply;
+}
+
+function closeSplitDialog() {
+    splitReply.value = null;
+}
+
+function stripHtml(html) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || '';
+}
+
 const escDark = inject(
     'esc-dark',
     computed(() => false),
@@ -75,6 +93,18 @@ function togglePin(reply) {
                     </span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <button
+                        v-if="splittable && !reply.is_internal_note"
+                        :class="[
+                            'rounded px-2 py-0.5 text-xs font-medium transition-colors',
+                            escDark
+                                ? 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                                : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                        ]"
+                        @click="openSplitDialog(reply)"
+                    >
+                        {{ t('reply.split') }}
+                    </button>
                     <button
                         v-if="pinnable && reply.is_internal_note"
                         :class="[
@@ -101,7 +131,7 @@ function togglePin(reply) {
                     'prose prose-sm max-w-none',
                     escDark ? 'prose-invert text-[var(--esc-panel-text-secondary)]' : 'text-gray-700',
                 ]"
-                v-html="sanitizeHtml(reply.body)"
+                v-html="highlightMentions(sanitizeHtml(reply.body), escDark)"
             ></div>
             <AttachmentList v-if="reply.attachments?.length" :attachments="reply.attachments" class="mt-3" />
         </div>
@@ -111,5 +141,13 @@ function togglePin(reply) {
         >
             {{ t('ticket.no_replies') }}
         </div>
+        <TicketSplitDialog
+            v-if="splitReply"
+            :ticket-reference="ticketReference"
+            :reply-id="splitReply.id"
+            :reply-author="splitReply.author?.name || ''"
+            :reply-excerpt="stripHtml(splitReply.body)"
+            @close="closeSplitDialog"
+        />
     </div>
 </template>