@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/EscalatedLayout.vue

@@ -2,8 +2,9 @@
 import { computed, inject, provide } from 'vue';
 import { usePage, Link } from '@inertiajs/vue3';
 import { usePluginExtensions } from '../composables/usePluginExtensions';
+import ActiveChatsPanel from './ActiveChatsPanel.vue';
 
-const props = defineProps({
+defineProps({
     title: { type: String, default: 'Support' },
 });
 
@@ -24,6 +25,11 @@ const isAgentSection = computed(() => currentUrl.value?.includes('/agent'));
 const isPanel = computed(() => isAdminSection.value || isAgentSection.value);
 const isDark = computed(() => isPanel.value && panelConfig.mode !== 'light');
 const showPoweredBy = computed(() => page.props.escalated?.show_powered_by !== false);
+const kbEnabled = computed(() => page.props.escalated?.knowledge_base_enabled !== false);
+const kbPublic = computed(() => page.props.escalated?.knowledge_base_public !== false);
+const chatEnabled = computed(() => page.props.escalated?.chat_enabled === true);
+const activeChats = computed(() => page.props.escalated?.active_chats || []);
+const agentId = computed(() => page.props.auth?.user?.id);
 
 provide('esc-dark', isDark);
 
@@ -57,7 +63,7 @@ const adminLinks = computed(() => {
             position: 40,
         },
         {
-            href: `${p}/admin/knowledge-base/articles`,
+            href: `${p}/admin/kb-articles`,
             label: 'Knowledge Base',
             icon: 'M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25',
             position: 45,
@@ -69,10 +75,10 @@ const adminLinks = computed(() => {
             position: 50,
         },
         {
-            href: `${p}/admin/automations`,
-            label: 'Automations',
-            icon: 'M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182',
-            position: 52,
+            href: `${p}/admin/workflows`,
+            label: 'Workflows',
+            icon: 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
+            position: 53,
         },
         {
             href: `${p}/admin/webhooks`,
@@ -122,6 +128,12 @@ const adminLinks = computed(() => {
             icon: 'M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z',
             position: 84,
         },
+        {
+            href: `${p}/admin/users`,
+            label: 'Users',
+            icon: 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z',
+            position: 83,
+        },
         {
             href: `${p}/admin/capacity`,
             label: 'Capacity',
@@ -505,6 +517,9 @@ function isActive(href) {
                 Powered by Escalated
             </a>
         </footer>
+
+        <!-- Active Chats Panel (agent layout only, when chat enabled) -->
+        <ActiveChatsPanel v-if="chatEnabled && agentId" :chats="activeChats" :agent-id="agentId" />
     </div>
 
     <!-- MODE 3: Customer pages — use host app layout if provided -->
@@ -514,6 +529,13 @@ function isActive(href) {
                 <h2 class="text-xl font-semibold leading-tight text-gray-800">{{ title }}</h2>
                 <nav class="flex items-center gap-4 text-sm">
                     <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
+                    <Link
+                        v-if="kbEnabled && (kbPublic || page.props.auth?.user)"
+                        :href="`${prefix}/kb`"
+                        class="text-gray-600 hover:text-gray-900"
+                    >
+                        Knowledge Base
+                    </Link>
                     <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">
                         Agent Panel
                     </Link>
@@ -538,6 +560,13 @@ function isActive(href) {
                         <span class="text-lg font-bold text-gray-900">{{ title }}</span>
                         <div class="flex items-center gap-4 text-sm">
                             <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
+                            <Link
+                                v-if="kbEnabled && (kbPublic || page.props.auth?.user)"
+                                :href="`${prefix}/kb`"
+                                class="text-gray-600 hover:text-gray-900"
+                            >
+                                Knowledge Base
+                            </Link>
                             <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">
                                 Agent Panel
                             </Link>

package/src/components/FileDropzone.vue

@@ -1,57 +1,57 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-
-const emit = defineEmits(['files']);
-const dark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-
-const dragging = ref(false);
-const fileInput = ref(null);
-
-function onDrop(e) {
-    dragging.value = false;
-    if (e.dataTransfer?.files?.length) {
-        emit('files', Array.from(e.dataTransfer.files));
-    }
-}
-
-function onFileSelect(e) {
-    if (e.target.files?.length) {
-        emit('files', Array.from(e.target.files));
-        e.target.value = '';
-    }
-}
-
-function browse() {
-    fileInput.value?.click();
-}
-</script>
-
-<template>
-    <div
-        role="button"
-        aria-label="Drop files here or click to upload"
-        :class="[
-            'cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
-            dark
-                ? dragging
-                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)]'
-                    : 'border-[var(--esc-panel-border)] hover:border-[var(--esc-panel-border-input)]'
-                : dragging
-                  ? 'border-blue-400 bg-blue-50'
-                  : 'border-gray-300 hover:border-gray-400',
-        ]"
-        @dragover.prevent="dragging = true"
-        @dragleave="dragging = false"
-        @drop.prevent="onDrop"
-        @click="browse"
-    >
-        <p :class="dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">
-            Drop files here or
-            <span :class="['font-medium', dark ? 'text-[var(--esc-panel-text)]' : 'text-blue-600']">browse</span>
-        </p>
-        <input ref="fileInput" type="file" multiple aria-label="Upload files" class="hidden" @change="onFileSelect" />
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const emit = defineEmits(['files']);
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const dragging = ref(false);
+const fileInput = ref(null);
+
+function onDrop(e) {
+    dragging.value = false;
+    if (e.dataTransfer?.files?.length) {
+        emit('files', Array.from(e.dataTransfer.files));
+    }
+}
+
+function onFileSelect(e) {
+    if (e.target.files?.length) {
+        emit('files', Array.from(e.target.files));
+        e.target.value = '';
+    }
+}
+
+function browse() {
+    fileInput.value?.click();
+}
+</script>
+
+<template>
+    <div
+        role="button"
+        aria-label="Drop files here or click to upload"
+        :class="[
+            'cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
+            dark
+                ? dragging
+                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)]'
+                    : 'border-[var(--esc-panel-border)] hover:border-[var(--esc-panel-border-input)]'
+                : dragging
+                  ? 'border-blue-400 bg-blue-50'
+                  : 'border-gray-300 hover:border-gray-400',
+        ]"
+        @dragover.prevent="dragging = true"
+        @dragleave="dragging = false"
+        @drop.prevent="onDrop"
+        @click="browse"
+    >
+        <p :class="dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">
+            Drop files here or
+            <span :class="['font-medium', dark ? 'text-[var(--esc-panel-text)]' : 'text-blue-600']">browse</span>
+        </p>
+        <input ref="fileInput" type="file" multiple aria-label="Upload files" class="hidden" @change="onFileSelect" />
+    </div>
+</template>

package/src/components/FollowButton.stories.js

@@ -1,30 +1,30 @@
-import FollowButton from './FollowButton.vue';
-
-export default {
-    title: 'Components/FollowButton',
-    component: FollowButton,
-};
-
-export const NotFollowing = {
-    args: {
-        action: '#',
-        isFollowing: false,
-        followersCount: 3,
-    },
-};
-
-export const Following = {
-    args: {
-        action: '#',
-        isFollowing: true,
-        followersCount: 5,
-    },
-};
-
-export const NoFollowers = {
-    args: {
-        action: '#',
-        isFollowing: false,
-        followersCount: 0,
-    },
-};
+import FollowButton from './FollowButton.vue';
+
+export default {
+    title: 'Components/FollowButton',
+    component: FollowButton,
+};
+
+export const NotFollowing = {
+    args: {
+        action: '#',
+        isFollowing: false,
+        followersCount: 3,
+    },
+};
+
+export const Following = {
+    args: {
+        action: '#',
+        isFollowing: true,
+        followersCount: 5,
+    },
+};
+
+export const NoFollowers = {
+    args: {
+        action: '#',
+        isFollowing: false,
+        followersCount: 0,
+    },
+};

package/src/components/FollowButton.vue

@@ -1,88 +1,88 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-import { router } from '@inertiajs/vue3';
-
-const props = defineProps({
-    action: { type: String, required: true },
-    isFollowing: { type: Boolean, default: false },
-    followersCount: { type: Number, default: 0 },
-});
-
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-const following = ref(props.isFollowing);
-const count = ref(props.followersCount);
-const processing = ref(false);
-
-function toggle() {
-    if (processing.value) return;
-    processing.value = true;
-    router.post(
-        props.action,
-        {},
-        {
-            preserveScroll: true,
-            onSuccess: () => {
-                following.value = !following.value;
-                count.value += following.value ? 1 : -1;
-            },
-            onFinish: () => {
-                processing.value = false;
-            },
-        },
-    );
-}
-</script>
-
-<template>
-    <button
-        :disabled="processing"
-        :class="[
-            'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-            escDark
-                ? following
-                    ? 'bg-cyan-500/15 text-[var(--esc-panel-text)] ring-1 ring-[var(--esc-panel-accent)]/20 hover:bg-cyan-500/25'
-                    : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
-                : following
-                  ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300 hover:bg-blue-200'
-                  : 'border border-gray-300 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800',
-            processing && 'opacity-50 cursor-not-allowed',
-        ]"
-        :aria-pressed="following"
-        :aria-label="following ? 'Unfollow ticket' : 'Follow ticket'"
-        @click="toggle"
-    >
-        <!-- Eye icon -->
-        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-            <template v-if="following">
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-                />
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-            </template>
-            <template v-else>
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-                />
-            </template>
-        </svg>
-        {{ following ? 'Following' : 'Follow' }}
-        <span
-            v-if="count > 0"
-            :class="[
-                'rounded-full px-1.5 py-0.5 text-xs',
-                escDark
-                    ? 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)]'
-                    : 'bg-gray-100 text-gray-500',
-            ]"
-        >
-            {{ count }}
-        </span>
-    </button>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    isFollowing: { type: Boolean, default: false },
+    followersCount: { type: Number, default: 0 },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const following = ref(props.isFollowing);
+const count = ref(props.followersCount);
+const processing = ref(false);
+
+function toggle() {
+    if (processing.value) return;
+    processing.value = true;
+    router.post(
+        props.action,
+        {},
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                following.value = !following.value;
+                count.value += following.value ? 1 : -1;
+            },
+            onFinish: () => {
+                processing.value = false;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <button
+        :disabled="processing"
+        :class="[
+            'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+            escDark
+                ? following
+                    ? 'bg-cyan-500/15 text-[var(--esc-panel-text)] ring-1 ring-[var(--esc-panel-accent)]/20 hover:bg-cyan-500/25'
+                    : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                : following
+                  ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300 hover:bg-blue-200'
+                  : 'border border-gray-300 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800',
+            processing && 'opacity-50 cursor-not-allowed',
+        ]"
+        :aria-pressed="following"
+        :aria-label="following ? 'Unfollow ticket' : 'Follow ticket'"
+        @click="toggle"
+    >
+        <!-- Eye icon -->
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+            <template v-if="following">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+                />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </template>
+            <template v-else>
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+                />
+            </template>
+        </svg>
+        {{ following ? 'Following' : 'Follow' }}
+        <span
+            v-if="count > 0"
+            :class="[
+                'rounded-full px-1.5 py-0.5 text-xs',
+                escDark
+                    ? 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)]'
+                    : 'bg-gray-100 text-gray-500',
+            ]"
+        >
+            {{ count }}
+        </span>
+    </button>
+</template>