@escalated-dev/escalated 0.5.0 → 0.7.0

package/src/components/ReplyComposer.vue

@@ -1,159 +1,273 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-import { router } from '@inertiajs/vue3';
-import FileDropzone from './FileDropzone.vue';
-
-const props = defineProps({
-    action: { type: String, required: true },
-    cannedResponses: { type: Array, default: () => [] },
-    allowNotes: { type: Boolean, default: false },
-    placeholder: { type: String, default: 'Type your reply...' },
-    submitLabel: { type: String, default: null },
-});
-
-const emit = defineEmits(['submit']);
-const escDark = inject('esc-dark', computed(() => false));
-
-const body = ref('');
-const isNote = ref(false);
-const files = ref([]);
-const submitting = ref(false);
-
-function insertCanned(response) {
-    body.value += response.body;
-}
-
-function handleFiles(newFiles) {
-    files.value = [...files.value, ...newFiles];
-}
-
-function removeFile(index) {
-    files.value.splice(index, 1);
-}
-
-function submit() {
-    if (!body.value.trim() || submitting.value) return;
-    submitting.value = true;
-
-    const payload = {
-        body: body.value,
-        is_internal_note: isNote.value,
-        attachments: files.value,
-    };
-
-    emit('submit', payload);
-
-    router.post(props.action, payload, {
-        preserveScroll: true,
-        onSuccess: () => {
-            body.value = '';
-            files.value = [];
-            isNote.value = false;
-        },
-        onFinish: () => {
-            submitting.value = false;
-        },
-    });
-}
-
-const buttonLabel = computed(() => {
-    if (props.submitLabel) return props.submitLabel;
-    return isNote.value ? 'Add Note' : 'Send Reply';
-});
-</script>
-
-<template>
-    <!-- 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]']">
-                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]']">
-                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">
-            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>
-
-        <FileDropzone @files="handleFiles" class="mt-2" />
-
-        <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>
-            </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">
-                    <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']">
-                {{ buttonLabel }}
-            </button>
-        </div>
-    </div>
-
-    <!-- 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']">
-                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']">
-                Internal Note
-            </button>
-        </div>
-
-        <div v-if="isNote" class="mb-2 rounded bg-yellow-50 px-3 py-1.5 text-xs text-yellow-700">
-            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>
-
-        <FileDropzone @files="handleFiles" class="mt-2" />
-
-        <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>
-            </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">
-                    <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']">
-                {{ buttonLabel }}
-            </button>
-        </div>
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+import FileDropzone from './FileDropzone.vue';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    cannedResponses: { type: Array, default: () => [] },
+    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 body = ref('');
+const isNote = ref(false);
+const files = ref([]);
+const submitting = ref(false);
+
+// 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;
+}
+
+function handleFiles(newFiles) {
+    files.value = [...files.value, ...newFiles];
+}
+
+function removeFile(index) {
+    files.value.splice(index, 1);
+}
+
+function submit() {
+    if (!body.value.trim() || submitting.value) return;
+    submitting.value = true;
+    window.clearTimeout(typingTimer);
+    lastTypingSent = 0;
+
+    const payload = {
+        body: body.value,
+        is_internal_note: isNote.value,
+        attachments: files.value,
+    };
+
+    emit('submit', payload);
+
+    router.post(props.action, payload, {
+        preserveScroll: true,
+        onSuccess: () => {
+            body.value = '';
+            files.value = [];
+            isNote.value = false;
+        },
+        onFinish: () => {
+            submitting.value = false;
+        },
+    });
+}
+
+const buttonLabel = computed(() => {
+    if (props.submitLabel) return props.submitLabel;
+    return isNote.value ? 'Add Note' : 'Send Reply';
+});
+</script>
+
+<template>
+    <!-- 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
+                :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
+                :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"
+        >
+            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>
+
+        <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 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
+                    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
+                :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>
+    </div>
+
+    <!-- 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
+                :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
+                :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>
+
+        <div v-if="isNote" class="mb-2 rounded bg-yellow-50 px-3 py-1.5 text-xs text-yellow-700">
+            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>
+
+        <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 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
+                    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
+                :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>
+    </div>
+</template>

package/src/components/ReplyThread.vue

@@ -2,6 +2,8 @@
 import { inject, computed } from 'vue';
 import { router } from '@inertiajs/vue3';
 import AttachmentList from './AttachmentList.vue';
+import { sanitizeHtml } from '../utils/sanitizeHtml';
+import { useI18n } from '../composables/useI18n';
 
 const props = defineProps({
     replies: { type: Array, required: true },
@@ -11,7 +13,11 @@ const props = defineProps({
     pinnable: { type: Boolean, default: false },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const { t } = useI18n();
 
 function formatDate(date) {
     return new Date(date).toLocaleString();
@@ -19,42 +25,91 @@ 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 || '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']">
-                        Internal Note
+                    <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']">
-                        Pinned
+                    <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')]">
-                        {{ reply.is_pinned ? 'Unpin' : 'Pin' }}
+                    <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="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="sanitizeHtml(reply.body)"
+            ></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']">No replies yet.</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>
     </div>
 </template>