@escalated-dev/escalated 0.7.0 → 0.7.1

package/src/pages/Agent/TicketIndex.vue

@@ -1,88 +1,112 @@
-<script setup>
-import { ref } from 'vue';
-import { usePage, router } from '@inertiajs/vue3';
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import TicketList from '../../components/TicketList.vue';
-import TicketFilters from '../../components/TicketFilters.vue';
-import QuickFilters from '../../components/QuickFilters.vue';
-import BulkActionBar from '../../components/BulkActionBar.vue';
-import KeyboardShortcutHelp from '../../components/KeyboardShortcutHelp.vue';
-import PluginSlot from '../../components/PluginSlot.vue';
-import { useKeyboardShortcuts } from '../../composables/useKeyboardShortcuts';
-import { usePluginExtensions } from '../../composables/usePluginExtensions';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-    departments: Array,
-    tags: Array,
-});
-
-const page = usePage();
-const selectedIds = ref([]);
-const ticketListRef = ref(null);
-const showShortcutHelp = ref(false);
-
-useKeyboardShortcuts({
-    j: () => {
-        ticketListRef.value?.moveDown();
-    },
-    k: () => {
-        ticketListRef.value?.moveUp();
-    },
-    x: () => {
-        ticketListRef.value?.toggleSelectFocused();
-    },
-    Enter: () => {
-        ticketListRef.value?.openFocused();
-    },
-    '?': () => {
-        showShortcutHelp.value = true;
-    },
-});
-
-const { getPageComponents } = usePluginExtensions();
-
-function applyQuickFilter(filter) {
-    router.get(route('escalated.agent.tickets.index'), filter, { preserveState: true });
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Ticket Queue">
-        <div class="mb-4">
-            <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
-        </div>
-        <PluginSlot
-            slot="ticket.list.before_filters"
-            :components="getPageComponents('ticket.list', 'before_filters')"
-        />
-        <div class="mb-6">
-            <TicketFilters
-                :filters="filters"
-                :route="route('escalated.agent.tickets.index')"
-                :departments="departments"
-                :tags="tags"
-                show-assignee
-                show-following
-            />
-        </div>
-        <TicketList
-            ref="ticketListRef"
-            v-model:selected-ids="selectedIds"
-            :tickets="tickets"
-            route-prefix="escalated.agent.tickets"
-            :columns="['reference', 'subject', 'requester', 'status', 'priority', 'assignee', 'updated']"
-            selectable
-            navigable
-        />
-        <BulkActionBar
-            :selected-ids="selectedIds"
-            :bulk-route="route('escalated.agent.tickets.bulk')"
-            :departments="departments"
-            @clear="selectedIds = []"
-        />
-        <PluginSlot slot="ticket.list.footer" :components="getPageComponents('ticket.list', 'footer')" />
-        <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="list" />
-    </EscalatedLayout>
-</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { usePage, router } from '@inertiajs/vue3';
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import TicketList from '../../components/TicketList.vue';
+import TicketFilters from '../../components/TicketFilters.vue';
+import QuickFilters from '../../components/QuickFilters.vue';
+import BulkActionBar from '../../components/BulkActionBar.vue';
+import KeyboardShortcutHelp from '../../components/KeyboardShortcutHelp.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { useKeyboardShortcuts } from '../../composables/useKeyboardShortcuts';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
+import { useRealtime } from '../../composables/useRealtime';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+    departments: Array,
+    tags: Array,
+});
+
+const page = usePage();
+const selectedIds = ref([]);
+const ticketListRef = ref(null);
+const showShortcutHelp = ref(false);
+
+useKeyboardShortcuts({
+    j: () => {
+        ticketListRef.value?.moveDown();
+    },
+    k: () => {
+        ticketListRef.value?.moveUp();
+    },
+    x: () => {
+        ticketListRef.value?.toggleSelectFocused();
+    },
+    Enter: () => {
+        ticketListRef.value?.openFocused();
+    },
+    '?': () => {
+        showShortcutHelp.value = true;
+    },
+});
+
+const { getPageComponents } = usePluginExtensions();
+
+function applyQuickFilter(filter) {
+    router.get(route('escalated.agent.tickets.index'), filter, { preserveState: true });
+}
+
+// Real-time updates - refresh the ticket list when new tickets arrive or statuses change
+const { echoAvailable, subscribeToTickets, subscribeToAgent } = useRealtime();
+
+onMounted(() => {
+    if (!echoAvailable.value) return;
+
+    subscribeToTickets({
+        onTicketCreated() {
+            router.reload({ only: ['tickets'], preserveScroll: true });
+        },
+    });
+
+    const userId = page.props.auth?.user?.id;
+    if (userId) {
+        subscribeToAgent(userId, {
+            onTicketAssigned() {
+                router.reload({ only: ['tickets'], preserveScroll: true });
+            },
+        });
+    }
+});
+</script>
+
+<template>
+    <EscalatedLayout title="Ticket Queue">
+        <div class="mb-4">
+            <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
+        </div>
+        <PluginSlot
+            slot="ticket.list.before_filters"
+            :components="getPageComponents('ticket.list', 'before_filters')"
+        />
+        <div class="mb-6">
+            <TicketFilters
+                :filters="filters"
+                :route="route('escalated.agent.tickets.index')"
+                :departments="departments"
+                :tags="tags"
+                show-assignee
+                show-following
+            />
+        </div>
+        <TicketList
+            ref="ticketListRef"
+            v-model:selected-ids="selectedIds"
+            :tickets="tickets"
+            route-prefix="escalated.agent.tickets"
+            :columns="['reference', 'subject', 'requester', 'status', 'priority', 'assignee', 'updated']"
+            selectable
+            navigable
+            show-live-badge
+        />
+        <BulkActionBar
+            :selected-ids="selectedIds"
+            :bulk-route="route('escalated.agent.tickets.bulk')"
+            :departments="departments"
+            @clear="selectedIds = []"
+        />
+        <PluginSlot slot="ticket.list.footer" :components="getPageComponents('ticket.list', 'footer')" />
+        <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="list" />
+    </EscalatedLayout>
+</template>

package/src/pages/Agent/TicketShow.vue

@@ -4,6 +4,9 @@ import StatusBadge from '../../components/StatusBadge.vue';
 import PriorityBadge from '../../components/PriorityBadge.vue';
 import ReplyThread from '../../components/ReplyThread.vue';
 import ReplyComposer from '../../components/ReplyComposer.vue';
+import ChatThread from '../../components/ChatThread.vue';
+import ChatComposer from '../../components/ChatComposer.vue';
+import ChatActionBar from '../../components/ChatActionBar.vue';
 import TicketSidebar from '../../components/TicketSidebar.vue';
 import AttachmentList from '../../components/AttachmentList.vue';
 import MacroDropdown from '../../components/MacroDropdown.vue';
@@ -17,8 +20,10 @@ import ContextPanel from '../../components/ContextPanel.vue';
 import ContextPanelSection from '../../components/ContextPanelSection.vue';
 import { useKeyboardShortcuts } from '../../composables/useKeyboardShortcuts';
 import { usePluginExtensions } from '../../composables/usePluginExtensions';
+import { useRealtime } from '../../composables/useRealtime';
+import { useChat } from '../../composables/useChat';
 import { router, useForm, usePage } from '@inertiajs/vue3';
-import { ref, computed, inject } from 'vue';
+import { ref, computed, inject, onMounted } from 'vue';
 
 const props = defineProps({
     ticket: Object,
@@ -32,6 +37,10 @@ const props = defineProps({
 
 const page = usePage();
 const isLightAgent = computed(() => page.props.escalated?.agent_type === 'light');
+// Route prefix the host framework mounts Escalated under. Defaults to
+// `support`, matching every host-adapter plugin. NestJS uses `escalated`.
+const routePrefix = computed(() => page.props.escalated?.prefix || 'support');
+const widgetPath = computed(() => `/${routePrefix.value}/widget`);
 const activeTab = ref(isLightAgent.value ? 'note' : 'reply');
 const showShortcutHelp = ref(false);
 const replyComposerRef = ref(null);
@@ -68,6 +77,55 @@ const escDark = inject(
     computed(() => false),
 );
 
+// Live chat mode detection
+const isChatMode = computed(() => props.ticket.channel === 'chat' && props.ticket.status === 'live');
+const chatMessages = ref(props.ticket.chat_messages || []);
+const chatTypingUser = ref(null);
+
+// Subscribe to chat channel for real-time messages. Pass widgetPath so
+// useChat's API calls resolve against whatever prefix the host framework
+// serves Escalated under (config on NestJS, default /support elsewhere).
+const { subscribeToChat } = useChat({ widgetPath: widgetPath.value });
+let chatTypingTimer = null;
+
+onMounted(() => {
+    if (!isChatMode.value || !props.ticket.chat_session_id) return;
+    subscribeToChat(props.ticket.chat_session_id, {
+        onMessage(data) {
+            chatMessages.value.push(data.message);
+        },
+        onTyping(data) {
+            chatTypingUser.value = data.name;
+            clearTimeout(chatTypingTimer);
+            chatTypingTimer = setTimeout(() => {
+                chatTypingUser.value = null;
+            }, 4000);
+        },
+        onEnded() {
+            router.reload({ preserveScroll: true });
+        },
+        onAssigned() {
+            router.reload({ preserveScroll: true });
+        },
+    });
+});
+
+function onChatSend(payload) {
+    // Optimistically add message to thread
+    chatMessages.value.push({
+        id: Date.now(),
+        body: payload.body,
+        is_internal_note: payload.is_internal_note,
+        is_agent: true,
+        author: { id: page.props.auth?.user?.id, name: page.props.auth?.user?.name },
+        created_at: new Date().toISOString(),
+    });
+}
+
+function onEndChat() {
+    router.reload({ preserveScroll: true });
+}
+
 const { getPageComponents } = usePluginExtensions();
 
 // Keyboard shortcuts
@@ -92,6 +150,31 @@ useKeyboardShortcuts({
         showShortcutHelp.value = true;
     },
 });
+
+// Real-time updates via WebSocket (gracefully degrades to no-op when Echo is absent)
+const { echoAvailable, subscribeToTicket } = useRealtime();
+
+onMounted(() => {
+    if (!echoAvailable.value || !props.ticket?.id) return;
+
+    subscribeToTicket(props.ticket.id, {
+        onReplyCreated() {
+            router.reload({ only: ['ticket'], preserveScroll: true });
+        },
+        onStatusChanged() {
+            router.reload({ only: ['ticket'], preserveScroll: true });
+        },
+        onTicketUpdated() {
+            router.reload({ only: ['ticket'], preserveScroll: true });
+        },
+        onTicketAssigned() {
+            router.reload({ only: ['ticket'], preserveScroll: true });
+        },
+        onTicketEscalated() {
+            router.reload({ only: ['ticket'], preserveScroll: true });
+        },
+    });
+});
 </script>
 
 <template>
@@ -106,7 +189,11 @@ useKeyboardShortcuts({
             <StatusBadge :status="ticket.status" />
             <PriorityBadge :priority="ticket.priority" />
             <span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
-            <PresenceIndicator :ticket-reference="ticket.reference" route-prefix="escalated.agent" />
+            <PresenceIndicator
+                :ticket-reference="ticket.reference"
+                :ticket-id="ticket.id"
+                route-prefix="escalated.agent"
+            />
             <div class="ml-auto flex items-center gap-2">
                 <FollowButton
                     :is-following="is_following"
@@ -195,6 +282,21 @@ useKeyboardShortcuts({
         </div>
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
             <div class="lg:col-span-2 space-y-6">
+                <!-- Chat Action Bar (live chat mode) -->
+                <ChatActionBar
+                    v-if="isChatMode"
+                    :session-id="ticket.chat_session_id"
+                    :started-at="ticket.chat_started_at || ticket.created_at"
+                    :customer="{
+                        name: ticket.requester?.name,
+                        email: ticket.requester?.email,
+                        page_url: ticket.chat_metadata?.page_url,
+                    }"
+                    :agents="[]"
+                    :departments="departments"
+                    @end-chat="onEndChat"
+                />
+
                 <PinnedNotes
                     v-if="ticket.pinned_notes?.length"
                     :notes="ticket.pinned_notes"
@@ -212,65 +314,95 @@ useKeyboardShortcuts({
                     </p>
                     <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
                 </div>
-                <div>
-                    <div :class="['mb-4 flex gap-4 border-b', escDark ? 'border-white/[0.06]' : 'border-gray-200']">
-                        <button
-                            v-if="!isLightAgent"
-                            :class="[
-                                'pb-2 text-sm font-medium transition-colors',
-                                activeTab === 'reply'
-                                    ? escDark
-                                        ? 'border-b-2 border-cyan-500 text-white'
-                                        : 'border-b-2 border-blue-500 text-gray-900'
-                                    : escDark
-                                      ? 'text-neutral-500 hover:text-neutral-300'
-                                      : 'text-gray-400 hover:text-gray-600',
-                            ]"
-                            @click="activeTab = 'reply'"
-                        >
-                            Reply
-                        </button>
-                        <button
-                            :class="[
-                                'pb-2 text-sm font-medium transition-colors',
-                                activeTab === 'note'
-                                    ? escDark
-                                        ? 'border-b-2 border-amber-500 text-amber-400'
-                                        : 'border-b-2 border-amber-500 text-amber-700'
-                                    : escDark
-                                      ? 'text-neutral-500 hover:text-neutral-300'
-                                      : 'text-gray-400 hover:text-gray-600',
-                            ]"
-                            @click="activeTab = 'note'"
-                        >
-                            Internal Note
-                        </button>
+                <!-- Live Chat Mode -->
+                <template v-if="isChatMode">
+                    <div
+                        :class="[
+                            'overflow-hidden rounded-xl border',
+                            escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
+                        ]"
+                    >
+                        <ChatThread
+                            :messages="chatMessages"
+                            :typing-user="chatTypingUser"
+                            :current-user-id="page.props.auth?.user?.id"
+                        />
+                        <ChatComposer
+                            :session-id="ticket.chat_session_id"
+                            :send-endpoint="
+                                ticket.chat_session_id ? `${widgetPath}/chat/${ticket.chat_session_id}/messages` : ''
+                            "
+                            :typing-endpoint="
+                                ticket.chat_session_id ? `${widgetPath}/chat/${ticket.chat_session_id}/typing` : ''
+                            "
+                            allow-notes
+                            @send="onChatSend"
+                        />
                     </div>
-                    <ReplyComposer
-                        v-if="activeTab === 'reply' && !isLightAgent"
-                        ref="replyComposerRef"
-                        :action="route('escalated.agent.tickets.reply', ticket.reference)"
-                        :canned-responses="cannedResponses"
-                    />
-                    <ReplyComposer
-                        v-if="activeTab === 'note'"
-                        :action="route('escalated.agent.tickets.note', ticket.reference)"
-                        placeholder="Write an internal note..."
-                        submit-label="Add Note"
-                    />
-                </div>
-                <div>
-                    <h2 :class="['mb-4 text-lg font-semibold', escDark ? 'text-neutral-200' : 'text-gray-900']">
-                        Conversation
-                    </h2>
-                    <ReplyThread
-                        :replies="ticket.replies || []"
-                        :current-user-id="page.props.auth?.user?.id"
-                        :ticket-reference="ticket.reference"
-                        route-prefix="escalated.agent"
-                        pinnable
-                    />
-                </div>
+                </template>
+
+                <!-- Standard Reply Mode -->
+                <template v-else>
+                    <div>
+                        <div :class="['mb-4 flex gap-4 border-b', escDark ? 'border-white/[0.06]' : 'border-gray-200']">
+                            <button
+                                v-if="!isLightAgent"
+                                :class="[
+                                    'pb-2 text-sm font-medium transition-colors',
+                                    activeTab === 'reply'
+                                        ? escDark
+                                            ? 'border-b-2 border-cyan-500 text-white'
+                                            : 'border-b-2 border-blue-500 text-gray-900'
+                                        : escDark
+                                          ? 'text-neutral-500 hover:text-neutral-300'
+                                          : 'text-gray-400 hover:text-gray-600',
+                                ]"
+                                @click="activeTab = 'reply'"
+                            >
+                                Reply
+                            </button>
+                            <button
+                                :class="[
+                                    'pb-2 text-sm font-medium transition-colors',
+                                    activeTab === 'note'
+                                        ? escDark
+                                            ? 'border-b-2 border-amber-500 text-amber-400'
+                                            : 'border-b-2 border-amber-500 text-amber-700'
+                                        : escDark
+                                          ? 'text-neutral-500 hover:text-neutral-300'
+                                          : 'text-gray-400 hover:text-gray-600',
+                                ]"
+                                @click="activeTab = 'note'"
+                            >
+                                Internal Note
+                            </button>
+                        </div>
+                        <ReplyComposer
+                            v-if="activeTab === 'reply' && !isLightAgent"
+                            ref="replyComposerRef"
+                            :action="route('escalated.agent.tickets.reply', ticket.reference)"
+                            :canned-responses="cannedResponses"
+                        />
+                        <ReplyComposer
+                            v-if="activeTab === 'note'"
+                            :action="route('escalated.agent.tickets.note', ticket.reference)"
+                            placeholder="Write an internal note..."
+                            submit-label="Add Note"
+                        />
+                    </div>
+                    <div>
+                        <h2 :class="['mb-4 text-lg font-semibold', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                            Conversation
+                        </h2>
+                        <ReplyThread
+                            :replies="ticket.replies || []"
+                            :current-user-id="page.props.auth?.user?.id"
+                            :ticket-reference="ticket.reference"
+                            route-prefix="escalated.agent"
+                            pinnable
+                        />
+                    </div>
+                </template>
             </div>
             <div class="space-y-6">
                 <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />

package/src/pages/Customer/Create.vue

@@ -6,7 +6,7 @@ import PluginSlot from '../../components/PluginSlot.vue';
 import { useForm } from '@inertiajs/vue3';
 import { usePluginExtensions } from '../../composables/usePluginExtensions';
 
-const props = defineProps({
+defineProps({
     departments: Array,
     priorities: Array,
 });

package/src/pages/Customer/Index.vue

@@ -1,31 +1,31 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import TicketList from '../../components/TicketList.vue';
-import TicketFilters from '../../components/TicketFilters.vue';
-import PluginSlot from '../../components/PluginSlot.vue';
-import { Link } from '@inertiajs/vue3';
-import { usePluginExtensions } from '../../composables/usePluginExtensions';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-});
-
-const { getPageComponents } = usePluginExtensions();
-</script>
-
-<template>
-    <EscalatedLayout title="My Tickets">
-        <PluginSlot slot="customer.index.header" :components="getPageComponents('customer.index', 'header')" />
-        <div class="mb-6 flex items-center justify-between">
-            <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
-            <Link
-                :href="route('escalated.customer.tickets.create')"
-                class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
-            >
-                New Ticket
-            </Link>
-        </div>
-        <TicketList :tickets="tickets" route-prefix="escalated.customer.tickets" />
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import TicketList from '../../components/TicketList.vue';
+import TicketFilters from '../../components/TicketFilters.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { Link } from '@inertiajs/vue3';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+});
+
+const { getPageComponents } = usePluginExtensions();
+</script>
+
+<template>
+    <EscalatedLayout title="My Tickets">
+        <PluginSlot slot="customer.index.header" :components="getPageComponents('customer.index', 'header')" />
+        <div class="mb-6 flex items-center justify-between">
+            <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
+            <Link
+                :href="route('escalated.customer.tickets.create')"
+                class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+            >
+                New Ticket
+            </Link>
+        </div>
+        <TicketList :tickets="tickets" route-prefix="escalated.customer.tickets" />
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/KnowledgeBase/Article.vue

@@ -6,6 +6,7 @@ import { ref } from 'vue';
 const props = defineProps({
     article: Object,
     related: Array,
+    feedbackEnabled: { type: Boolean, default: true },
 });
 
 const feedbackSent = ref(false);
@@ -42,8 +43,9 @@ function sendFeedback(helpful) {
                 <Link
                     :href="route('escalated.customer.kb.index', { category: article.category.id })"
                     class="hover:text-gray-700"
-                    >{{ article.category.name }}</Link
                 >
+                    {{ article.category.name }}
+                </Link>
             </div>
 
             <!-- Article -->
@@ -61,7 +63,7 @@ function sendFeedback(helpful) {
             </article>
 
             <!-- Feedback -->
-            <div class="mt-6 rounded-lg border border-gray-200 bg-white p-6 text-center">
+            <div v-if="feedbackEnabled" class="mt-6 rounded-lg border border-gray-200 bg-white p-6 text-center">
                 <template v-if="!feedbackSent">
                     <p class="mb-3 text-sm font-medium text-gray-700">Was this article helpful?</p>
                     <div class="flex items-center justify-center gap-3">