@escalated-dev/escalated 0.6.0 → 0.7.1

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 },
@@ -9,15 +11,87 @@ const props = defineProps({
     allowNotes: { type: Boolean, default: false },
     placeholder: { type: String, default: 'Type your reply...' },
     submitLabel: { type: String, default: null },
+    typingEndpoint: { type: String, default: '' },
 });
 
 const emit = defineEmits(['submit']);
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 
 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;
+let typingTimer = null;
+
+function onTyping() {
+    if (!props.typingEndpoint) return;
+    const now = Date.now();
+    if (now - lastTypingSent < 5000) return;
+    lastTypingSent = now;
+    sendTypingIndicator();
+
+    // Clear typing after 6 seconds of inactivity
+    window.clearTimeout(typingTimer);
+    typingTimer = window.setTimeout(() => {
+        lastTypingSent = 0;
+    }, 6000);
+}
+
+async function sendTypingIndicator() {
+    try {
+        await fetch(props.typingEndpoint, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+        });
+    } catch {
+        // silently ignore
+    }
+}
+
+function onBlur() {
+    window.clearTimeout(typingTimer);
+    lastTypingSent = 0;
+}
 
 function insertCanned(response) {
     body.value += response.body;
@@ -34,6 +108,8 @@ function removeFile(index) {
 function submit() {
     if (!body.value.trim() || submitting.value) return;
     submitting.value = true;
+    window.clearTimeout(typingTimer);
+    lastTypingSent = 0;
 
     const payload = {
         body: body.value,
@@ -66,45 +142,100 @@ const buttonLabel = computed(() => {
     <!-- Dark mode -->
     <div v-if="escDark" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
         <div v-if="allowNotes" class="mb-3 flex gap-2">
-            <button @click="isNote = false"
-                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', !isNote ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
+            <button
+                :class="[
+                    'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                    !isNote
+                        ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20'
+                        : 'text-gray-400 hover:bg-white/[0.04]',
+                ]"
+                @click="isNote = false"
+            >
                 Reply
             </button>
-            <button @click="isNote = true"
-                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', isNote ? 'bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
+            <button
+                :class="[
+                    'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                    isNote
+                        ? 'bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20'
+                        : 'text-gray-400 hover:bg-white/[0.04]',
+                ]"
+                aria-label="Internal note"
+                @click="isNote = true"
+            >
                 Internal Note
             </button>
         </div>
 
-        <div v-if="isNote" class="mb-2 rounded-lg bg-amber-500/10 px-3 py-1.5 text-xs text-amber-400 ring-1 ring-amber-500/20">
+        <div
+            v-if="isNote"
+            class="mb-2 rounded-lg bg-amber-500/10 px-3 py-1.5 text-xs text-amber-400 ring-1 ring-amber-500/20"
+        >
             This note is only visible to agents.
         </div>
 
-        <textarea v-model="body" rows="4" :placeholder="placeholder"
-                  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"></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 @files="handleFiles" class="mt-2" />
+        <FileDropzone class="mt-2" @files="handleFiles" />
 
         <div v-if="files.length" class="mt-2 space-y-1">
             <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-400">
                 <span>{{ file.name }}</span>
-                <button @click="removeFile(i)" class="text-rose-400 hover:text-rose-300">&times;</button>
+                <button aria-label="Remove attachment" class="text-rose-400 hover:text-rose-300" @click="removeFile(i)">
+                    &times;
+                </button>
             </div>
         </div>
 
         <div class="mt-3 flex items-center justify-between">
             <div v-if="cannedResponses.length">
-                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
-                        class="rounded-lg border border-white/10 bg-gray-900 px-2 py-1 text-xs text-gray-400">
+                <select
+                    class="rounded-lg border border-white/10 bg-gray-900 px-2 py-1 text-xs text-gray-400"
+                    @change="
+                        insertCanned(cannedResponses[$event.target.value]);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Canned responses...</option>
                     <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
                 </select>
             </div>
             <div v-else></div>
-            <button @click="submit" :disabled="!body.trim() || submitting"
-                    :class="['rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
-                             isNote ? 'bg-amber-500 hover:bg-amber-400' : 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400',
-                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-40']">
+            <button
+                :disabled="!body.trim() || submitting"
+                :class="[
+                    'rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
+                    isNote
+                        ? 'bg-amber-500 hover:bg-amber-400'
+                        : 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400',
+                    (!body.trim() || submitting) && 'cursor-not-allowed opacity-40',
+                ]"
+                @click="submit"
+            >
                 {{ buttonLabel }}
             </button>
         </div>
@@ -113,12 +244,23 @@ const buttonLabel = computed(() => {
     <!-- Light mode -->
     <div v-else class="rounded-lg border border-gray-200 bg-white p-4">
         <div v-if="allowNotes" class="mb-3 flex gap-2">
-            <button @click="isNote = false"
-                    :class="['rounded-md px-3 py-1 text-sm font-medium', !isNote ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100']">
+            <button
+                :class="[
+                    'rounded-md px-3 py-1 text-sm font-medium',
+                    !isNote ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100',
+                ]"
+                @click="isNote = false"
+            >
                 Reply
             </button>
-            <button @click="isNote = true"
-                    :class="['rounded-md px-3 py-1 text-sm font-medium', isNote ? 'bg-yellow-100 text-yellow-700' : 'text-gray-500 hover:bg-gray-100']">
+            <button
+                :class="[
+                    'rounded-md px-3 py-1 text-sm font-medium',
+                    isNote ? 'bg-yellow-100 text-yellow-700' : 'text-gray-500 hover:bg-gray-100',
+                ]"
+                aria-label="Internal note"
+                @click="isNote = true"
+            >
                 Internal Note
             </button>
         </div>
@@ -127,31 +269,66 @@ const buttonLabel = computed(() => {
             This note is only visible to agents.
         </div>
 
-        <textarea v-model="body" rows="4" :placeholder="placeholder"
-                  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"></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 @files="handleFiles" class="mt-2" />
+        <FileDropzone class="mt-2" @files="handleFiles" />
 
         <div v-if="files.length" class="mt-2 space-y-1">
             <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-600">
                 <span>{{ file.name }}</span>
-                <button @click="removeFile(i)" class="text-red-500 hover:text-red-700">&times;</button>
+                <button aria-label="Remove attachment" class="text-red-500 hover:text-red-700" @click="removeFile(i)">
+                    &times;
+                </button>
             </div>
         </div>
 
         <div class="mt-3 flex items-center justify-between">
             <div v-if="cannedResponses.length">
-                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
-                        class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600">
+                <select
+                    class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600"
+                    @change="
+                        insertCanned(cannedResponses[$event.target.value]);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Canned responses...</option>
                     <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
                 </select>
             </div>
             <div v-else></div>
-            <button @click="submit" :disabled="!body.trim() || submitting"
-                    :class="['rounded-md px-4 py-2 text-sm font-medium text-white',
-                             isNote ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-blue-600 hover:bg-blue-700',
-                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-50']">
+            <button
+                :disabled="!body.trim() || submitting"
+                :class="[
+                    'rounded-md px-4 py-2 text-sm font-medium text-white',
+                    isNote ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-blue-600 hover:bg-blue-700',
+                    (!body.trim() || submitting) && 'cursor-not-allowed opacity-50',
+                ]"
+                @click="submit"
+            >
                 {{ buttonLabel }}
             </button>
         </div>

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,9 +13,28 @@ const props = defineProps({
     ticketReference: { type: String, default: '' },
     routePrefix: { type: String, default: '' },
     pinnable: { type: Boolean, default: false },
+    splittable: { type: Boolean, default: false },
 });
 
-const escDark = inject('esc-dark', computed(() => 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),
+);
 const { t } = useI18n();
 
 function formatDate(date) {
@@ -22,42 +43,111 @@ function formatDate(date) {
 
 function togglePin(reply) {
     if (!props.routePrefix || !props.ticketReference) return;
-    router.post(route(`${props.routePrefix}.tickets.pin`, [props.ticketReference, reply.id]), {}, { preserveScroll: true });
+    router.post(
+        route(`${props.routePrefix}.tickets.pin`, [props.ticketReference, reply.id]),
+        {},
+        { preserveScroll: true },
+    );
 }
 </script>
 
 <template>
-    <div class="space-y-4">
-        <div v-for="reply in replies" :key="reply.id"
-             :class="['rounded-xl border p-4', escDark
-                 ? (reply.is_internal_note ? 'border-amber-500/20 bg-amber-500/5' : 'border-white/[0.06] bg-neutral-900/60')
-                 : (reply.is_internal_note ? 'border-yellow-200 bg-yellow-50' : 'border-gray-200 bg-white')]">
+    <div class="space-y-4" role="feed" aria-label="Reply thread">
+        <div
+            v-for="reply in replies"
+            :key="reply.id"
+            :class="[
+                'rounded-xl border p-4',
+                escDark
+                    ? reply.is_internal_note
+                        ? 'border-amber-500/20 bg-amber-500/5'
+                        : 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]'
+                    : reply.is_internal_note
+                      ? 'border-yellow-200 bg-yellow-50'
+                      : 'border-gray-200 bg-white',
+            ]"
+        >
             <div class="mb-2 flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                    <span :class="['font-medium', escDark ? 'text-gray-200' : 'text-gray-900']">{{ reply.author?.name || t('ticket.unknown') }}</span>
-                    <span v-if="reply.is_internal_note"
-                          :class="['rounded px-1.5 py-0.5 text-xs font-medium', escDark ? 'bg-amber-500/15 text-amber-400' : 'bg-yellow-200 text-yellow-800']">
+                    <span
+                        :class="['font-medium', escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-900']"
+                        >{{ reply.author?.name || t('ticket.unknown') }}</span
+                    >
+                    <span
+                        v-if="reply.is_internal_note"
+                        :class="[
+                            'rounded px-1.5 py-0.5 text-xs font-medium',
+                            escDark ? 'bg-amber-500/15 text-amber-400' : 'bg-yellow-200 text-yellow-800',
+                        ]"
+                    >
                         {{ t('reply.internal_note') }}
                     </span>
-                    <span v-if="reply.is_pinned"
-                          :class="['rounded px-1.5 py-0.5 text-xs font-medium', escDark ? 'bg-cyan-500/15 text-cyan-400' : 'bg-blue-100 text-blue-700']">
+                    <span
+                        v-if="reply.is_pinned"
+                        :class="[
+                            'rounded px-1.5 py-0.5 text-xs font-medium',
+                            escDark ? 'bg-cyan-500/15 text-cyan-400' : 'bg-blue-100 text-blue-700',
+                        ]"
+                    >
                         {{ t('reply.pinned') }}
                     </span>
                 </div>
                 <div class="flex items-center gap-2">
-                    <button v-if="pinnable && reply.is_internal_note" @click="togglePin(reply)"
-                            :class="['rounded px-2 py-0.5 text-xs font-medium transition-colors',
-                                     escDark
-                                         ? (reply.is_pinned ? 'bg-cyan-500/15 text-cyan-400 hover:bg-cyan-500/25' : 'text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300')
-                                         : (reply.is_pinned ? 'bg-blue-100 text-blue-700 hover:bg-blue-200' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600')]">
+                    <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="[
+                            'rounded px-2 py-0.5 text-xs font-medium transition-colors',
+                            escDark
+                                ? reply.is_pinned
+                                    ? 'bg-cyan-500/15 text-cyan-400 hover:bg-cyan-500/25'
+                                    : 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                                : reply.is_pinned
+                                  ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+                                  : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                        ]"
+                        @click="togglePin(reply)"
+                    >
                         {{ reply.is_pinned ? t('reply.unpin') : t('reply.pin') }}
                     </button>
-                    <span :class="['text-xs', escDark ? 'text-gray-500' : 'text-gray-500']">{{ formatDate(reply.created_at) }}</span>
+                    <span :class="['text-xs', escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500']">{{
+                        formatDate(reply.created_at)
+                    }}</span>
                 </div>
             </div>
-            <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-gray-300' : 'text-gray-700']" v-html="sanitizeHtml(reply.body)"></div>
+            <div
+                :class="[
+                    'prose prose-sm max-w-none',
+                    escDark ? 'prose-invert text-[var(--esc-panel-text-secondary)]' : 'text-gray-700',
+                ]"
+                v-html="highlightMentions(sanitizeHtml(reply.body), escDark)"
+            ></div>
             <AttachmentList v-if="reply.attachments?.length" :attachments="reply.attachments" class="mt-3" />
         </div>
-        <div v-if="!replies?.length" :class="['py-8 text-center text-sm', escDark ? 'text-gray-500' : 'text-gray-500']">{{ t('ticket.no_replies') }}</div>
+        <div
+            v-if="!replies?.length"
+            :class="['py-8 text-center text-sm', escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500']"
+        >
+            {{ 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>