@escalated-dev/escalated 0.7.0 → 0.8.0

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,9 +1,10 @@
 <script setup>
+import { computed } from 'vue';
 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 { Link, usePage } from '@inertiajs/vue3';
 import { usePluginExtensions } from '../../composables/usePluginExtensions';
 
 defineProps({
@@ -12,11 +13,35 @@ defineProps({
 });
 
 const { getPageComponents } = usePluginExtensions();
+const page = usePage();
+const isAdmin = computed(() => !!page.props.escalated?.is_admin);
+const isAgent = computed(() => !!page.props.escalated?.is_agent);
+const staffPanelHref = computed(() => {
+    const prefix = page.props.escalated?.prefix || 'support';
+    const base = prefix.startsWith('/') ? prefix : `/${prefix}`;
+    return isAdmin.value ? `${base}/admin/tickets` : `${base}/agent/tickets`;
+});
+const staffPanelLabel = computed(() => (isAdmin.value ? 'Open admin panel' : 'Open agent panel'));
 </script>
 
 <template>
     <EscalatedLayout title="My Tickets">
         <PluginSlot slot="customer.index.header" :components="getPageComponents('customer.index', 'header')" />
+        <div
+            v-if="isAdmin || isAgent"
+            class="mb-4 flex items-center justify-between gap-4 rounded-lg border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm text-indigo-900"
+        >
+            <div>
+                <span class="font-medium">You're viewing your personal tickets.</span>
+                <span class="text-indigo-800/80"> Customer-submitted tickets live in the staff panel. </span>
+            </div>
+            <a
+                :href="staffPanelHref"
+                class="shrink-0 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700"
+            >
+                {{ staffPanelLabel }}
+            </a>
+        </div>
         <div class="mb-6 flex items-center justify-between">
             <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
             <Link

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">