@escalated-dev/escalated 0.7.0 → 0.8.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Escalated Dev
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Escalated Dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,19 +1,51 @@
+<p align="center">
+  <a href="docs/translations/README.ar.md">العربية</a> •
+  <a href="docs/translations/README.de.md">Deutsch</a> •
+  <b>English</b> •
+  <a href="docs/translations/README.es.md">Español</a> •
+  <a href="docs/translations/README.fr.md">Français</a> •
+  <a href="docs/translations/README.it.md">Italiano</a> •
+  <a href="docs/translations/README.ja.md">日本語</a> •
+  <a href="docs/translations/README.ko.md">한국어</a> •
+  <a href="docs/translations/README.nl.md">Nederlands</a> •
+  <a href="docs/translations/README.pl.md">Polski</a> •
+  <a href="docs/translations/README.pt-BR.md">Português (BR)</a> •
+  <a href="docs/translations/README.ru.md">Русский</a> •
+  <a href="docs/translations/README.tr.md">Türkçe</a> •
+  <a href="docs/translations/README.zh-CN.md">简体中文</a>
+</p>
+
 <h1>
   <img src="https://escalated.dev/apple-touch-icon.png" width="28" style="vertical-align:middle;" />
   Escalated
 </h1>
 
 [![Tests](https://github.com/escalated-dev/escalated/actions/workflows/run-tests.yml/badge.svg)](https://github.com/escalated-dev/escalated/actions/workflows/run-tests.yml)
+[![FOSSA Status](https://app.fossa.com/api/projects/custom%2B62107%2Fgithub.com%2Fescalated-dev%2Fescalated.svg?type=shield)](https://app.fossa.com/projects/custom%2B62107%2Fgithub.com%2Fescalated-dev%2Fescalated?ref=badge_shield)
 [![npm](https://img.shields.io/npm/v/@escalated-dev/escalated)](https://www.npmjs.com/package/@escalated-dev/escalated)
 [![Vue 3](https://img.shields.io/badge/vue-3.x-4FC08D?logo=vue.js&logoColor=white)](https://vuejs.org/)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+<p align="center">
+  <img src=".github/profile/demo.gif" alt="Escalated demo: filing a ticket and replying from the agent inbox" width="800" />
+</p>
+
 Escalated is an embeddable support ticket system with SLA tracking, escalation rules, agent workflows, and a customer portal. This repo contains all the shared frontend assets (Vue 3 + Inertia.js) used across every supported backend framework.
 
 👉 **Learn more, view demos, and compare Cloud vs Self-Hosted options at** **[https://escalated.dev](https://escalated.dev)**
 
 **You don't install this package directly.** Start with the backend package for your framework — it handles everything including pulling in these frontend assets.
 
+## Features
+
+- **Ticket splitting** — Split a reply into a new standalone ticket while preserving context
+- **Ticket snooze** — Snooze tickets with presets (1h, 4h, tomorrow, next week) and automatic wake
+- **Saved views / custom queues** — Save, name, and share filter presets as reusable ticket views
+- **Embeddable support widget** — Drop-in `<script>` widget with KB search, ticket form, and status check
+- **Real-time updates** — WebSocket support (Pusher/Reverb/Soketi) with automatic polling fallback
+- **Knowledge base toggle** — Enable or disable the public knowledge base from admin settings
+- **CI: ESLint + Prettier** — Automated code style enforcement on every pull request
+
 ## Get Started
 
 Pick your framework:
@@ -312,13 +344,16 @@ Peer dependencies: `vue` ^3.3.0, `@inertiajs/vue3` ^1.0.0 || ^2.0.0
 
 ## Ecosystem
 
-This is the shared frontend for the Escalated support ticket system. Backend packages available for every major framework:
+This is the shared frontend for the Escalated support ticket system. Host framework packages and client SDKs available across the ecosystem:
 
 - **[Escalated for Laravel](https://github.com/escalated-dev/escalated-laravel)** — Laravel Composer package
 - **[Escalated for Rails](https://github.com/escalated-dev/escalated-rails)** — Ruby on Rails engine
 - **[Escalated for Django](https://github.com/escalated-dev/escalated-django)** — Django reusable app
 - **[Escalated for AdonisJS](https://github.com/escalated-dev/escalated-adonis)** — AdonisJS v6 package
+- **[Escalated for WordPress](https://github.com/escalated-dev/escalated-wordpress)** — WordPress plugin
 - **[Escalated for Filament](https://github.com/escalated-dev/escalated-filament)** — Filament v3 admin panel plugin
+- **[Escalated for React Native](https://github.com/escalated-dev/escalated-react-native)** — React Native SDK
+- **[Escalated for Flutter](https://github.com/escalated-dev/escalated-flutter)** — Flutter SDK
 - **[Shared Frontend](https://github.com/escalated-dev/escalated)** — Vue 3 + Inertia.js UI components (you are here)
 
 ## License

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.7.0",
-  "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
+  "version": "0.8.0",
+  "description": "Vue 3 + Inertia.js UI components for Escalated \u00e2\u20ac\u201d the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",
   "homepage": "https://github.com/escalated-dev/escalated",
@@ -29,19 +29,25 @@
     "src"
   ],
   "peerDependencies": {
-    "@inertiajs/vue3": "^1.0.0 || ^2.0.0",
+    "@inertiajs/vue3": "^1.0.0 || ^2.0.0 || ^3.0.0",
     "vue": "^3.3.0"
   },
+  "dependencies": {
+    "@escalated-dev/locale": "github:escalated-dev/escalated-locale#v0.1.2"
+  },
   "scripts": {
     "test": "vitest run",
-    "lint": "eslint src/",
+    "lint": "eslint src/ --max-warnings 0",
     "lint:fix": "eslint src/ --fix",
     "format": "prettier --write src/",
     "format:check": "prettier --check src/",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "screenshot": "npx playwright test --config=playwright-screenshots.config.js"
+    "screenshot": "npx playwright test --config=playwright-screenshots.config.js",
+    "demo:serve": "node scripts/demo-server.js",
+    "demo:record": "node scripts/generate-demo.js",
+    "demo": "concurrently -k -s second \"npm run demo:serve\" \"wait-on http://localhost:3000 && npm run demo:record\""
   },
   "lint-staged": {
     "*.{js,vue}": [
@@ -59,17 +65,20 @@
     "@vitejs/plugin-vue": "^5.0.0",
     "@vue/test-utils": "^2.4.0",
     "autoprefixer": "^10.4.20",
+    "concurrently": "^9.0.0",
     "eslint": "^10.0.1",
     "eslint-plugin-storybook": "^10.2.12",
     "eslint-plugin-vue": "^10.8.0",
-    "happy-dom": "^15.0.0",
+    "happy-dom": "^20.9.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
+    "playwright": "^1.50.0",
     "postcss": "^8.5.0",
     "prettier": "^3.8.1",
     "storybook": "^10.2.12",
     "tailwindcss": "^3.4.0",
     "vitest": "^2.0.0",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "wait-on": "^9.0.5"
   }
 }

package/src/components/ActiveChatsPanel.vue

@@ -0,0 +1,246 @@
+<script setup>
+import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import { useI18n } from '../composables/useI18n';
+import { useChat } from '../composables/useChat';
+import { timeAgo } from '../utils/formatting';
+
+const props = defineProps({
+    chats: { type: Array, default: () => [] },
+    agentId: { type: [String, Number], default: null },
+    agentStatus: { type: String, default: 'online' },
+    navigateRoute: { type: String, default: '' },
+});
+
+const emit = defineEmits(['navigate', 'status-change']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const { t } = useI18n();
+
+const isOpen = ref(false);
+const currentStatus = ref(props.agentStatus);
+
+const statusOptions = [
+    { value: 'online', label: 'Online', color: 'bg-emerald-500' },
+    { value: 'away', label: 'Away', color: 'bg-amber-500' },
+    { value: 'offline', label: 'Offline', color: 'bg-neutral-500' },
+];
+
+const currentStatusOption = computed(
+    () => statusOptions.find((s) => s.value === currentStatus.value) || statusOptions[0],
+);
+
+function changeStatus(status) {
+    currentStatus.value = status;
+    emit('status-change', status);
+}
+
+const totalUnread = computed(() => {
+    return props.chats.reduce((sum, chat) => sum + (chat.unread_count || 0), 0);
+});
+
+// Activity state for each chat
+const now = ref(Date.now());
+let timerInterval = null;
+
+onMounted(() => {
+    timerInterval = setInterval(() => {
+        now.value = Date.now();
+    }, 10000);
+});
+
+onUnmounted(() => {
+    clearInterval(timerInterval);
+});
+
+function chatActivityState(chat) {
+    if (!chat.last_message_at) return 'new';
+    const diffMs = now.value - new Date(chat.last_message_at).getTime();
+    if (diffMs > 2 * 60 * 1000) return 'idle';
+    return 'active';
+}
+
+function activityDotClass(chat) {
+    const state = chatActivityState(chat);
+    if (state === 'new') return 'bg-blue-500 animate-pulse';
+    if (state === 'idle') return 'bg-amber-500';
+    return 'bg-emerald-500';
+}
+
+function navigateToChat(chat) {
+    emit('navigate', chat);
+}
+
+function truncate(str, len = 40) {
+    if (!str) return '';
+    return str.length > len ? str.slice(0, len) + '...' : str;
+}
+
+function chatInitials(chat) {
+    const name = chat.customer_name || 'U';
+    return name
+        .split(' ')
+        .map((w) => w[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}
+
+// Real-time: listen for new chats assigned to this agent. Read the
+// host framework's route prefix from Inertia page props (default
+// 'support') so chat API calls resolve correctly on NestJS backends
+// that use '/escalated/widget' instead of '/support/widget'.
+const page = usePage();
+const routePrefix = page.props.escalated?.prefix || 'support';
+const { subscribeToChatQueue } = useChat({ widgetPath: `/${routePrefix}/widget` });
+
+onMounted(() => {
+    subscribeToChatQueue({
+        onNewChat() {
+            // Parent should refresh chat list
+        },
+    });
+});
+</script>
+
+<template>
+    <!-- Toggle button -->
+    <button
+        :class="[
+            'fixed right-4 bottom-20 z-40 flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-all',
+            escDark
+                ? 'bg-gradient-to-r from-cyan-500 to-violet-500 text-white hover:from-cyan-400 hover:to-violet-400'
+                : 'bg-blue-600 text-white hover:bg-blue-500',
+        ]"
+        :aria-label="isOpen ? t('chat.close_panel') : t('chat.open_panel')"
+        @click="isOpen = !isOpen"
+    >
+        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
+            />
+        </svg>
+        <!-- Unread badge -->
+        <span
+            v-if="totalUnread > 0"
+            class="absolute -right-1 -top-1 flex h-5 min-w-[20px] items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold text-white"
+        >
+            {{ totalUnread > 99 ? '99+' : totalUnread }}
+        </span>
+    </button>
+
+    <!-- Panel -->
+    <div
+        v-if="isOpen"
+        :class="[
+            'fixed right-4 bottom-36 z-40 w-80 rounded-xl border shadow-2xl',
+            escDark ? 'border-white/[0.08] bg-neutral-900' : 'border-gray-200 bg-white',
+        ]"
+        style="max-height: calc(100vh - 200px)"
+    >
+        <!-- Header -->
+        <div
+            :class="[
+                'flex items-center justify-between border-b px-4 py-3',
+                escDark ? 'border-white/[0.06]' : 'border-gray-200',
+            ]"
+        >
+            <div class="flex items-center gap-2">
+                <h3 :class="['text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">
+                    {{ t('chat.active_chats') }}
+                </h3>
+                <span
+                    v-if="chats.length"
+                    :class="[
+                        'rounded-full px-1.5 py-0.5 text-[10px] font-medium',
+                        escDark ? 'bg-white/[0.06] text-neutral-400' : 'bg-gray-100 text-gray-500',
+                    ]"
+                >
+                    {{ chats.length }}
+                </span>
+            </div>
+            <!-- Status dropdown -->
+            <div class="relative">
+                <button
+                    :class="[
+                        'flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium transition-colors',
+                        escDark ? 'hover:bg-white/[0.06] text-neutral-400' : 'hover:bg-gray-100 text-gray-500',
+                    ]"
+                    @click="
+                        const idx = statusOptions.findIndex((s) => s.value === currentStatus);
+                        changeStatus(statusOptions[(idx + 1) % statusOptions.length].value);
+                    "
+                >
+                    <span :class="['h-2 w-2 rounded-full', currentStatusOption.color]"></span>
+                    {{ currentStatusOption.label }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Chat list -->
+        <div class="overflow-y-auto" style="max-height: 400px">
+            <div
+                v-if="!chats.length"
+                :class="['p-6 text-center text-sm', escDark ? 'text-neutral-600' : 'text-gray-400']"
+            >
+                {{ t('chat.no_active_chats') }}
+            </div>
+            <button
+                v-for="chat in chats"
+                :key="chat.id"
+                :class="[
+                    'flex w-full items-start gap-3 px-4 py-3 text-left transition-colors',
+                    escDark ? 'hover:bg-white/[0.04]' : 'hover:bg-gray-50',
+                ]"
+                @click="navigateToChat(chat)"
+            >
+                <!-- Avatar with status dot -->
+                <div class="relative flex-shrink-0">
+                    <div
+                        :class="[
+                            'flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold',
+                            escDark ? 'bg-neutral-800 text-neutral-300' : 'bg-gray-200 text-gray-600',
+                        ]"
+                    >
+                        {{ chatInitials(chat) }}
+                    </div>
+                    <span
+                        :class="[
+                            'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2',
+                            escDark ? 'border-neutral-900' : 'border-white',
+                            activityDotClass(chat),
+                        ]"
+                    ></span>
+                </div>
+
+                <!-- Chat info -->
+                <div class="min-w-0 flex-1">
+                    <div class="flex items-center justify-between">
+                        <span :class="['truncate text-sm font-medium', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                            {{ chat.customer_name || t('ticket.unknown') }}
+                        </span>
+                        <span :class="['flex-shrink-0 text-[10px]', escDark ? 'text-neutral-600' : 'text-gray-400']">
+                            {{ chat.last_message_at ? timeAgo(chat.last_message_at) : '' }}
+                        </span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span :class="['truncate text-xs', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                            {{ truncate(chat.last_message) }}
+                        </span>
+                        <span
+                            v-if="chat.unread_count"
+                            class="ml-2 flex h-4 min-w-[16px] flex-shrink-0 items-center justify-center rounded-full bg-cyan-500 px-1 text-[10px] font-bold text-white"
+                        >
+                            {{ chat.unread_count }}
+                        </span>
+                    </div>
+                </div>
+            </button>
+        </div>
+    </div>
+</template>

package/src/components/ActivityTimeline.stories.js

@@ -1,55 +1,55 @@
-import ActivityTimeline from './ActivityTimeline.vue';
-
-export default {
-    title: 'Components/ActivityTimeline',
-    component: ActivityTimeline,
-};
-
-const sampleActivities = [
-    {
-        id: 1,
-        type: 'status_changed',
-        causer: { name: 'Alice Chen' },
-        properties: { from: 'open', to: 'in_progress' },
-        created_at: new Date(Date.now() - 300000).toISOString(),
-    },
-    {
-        id: 2,
-        type: 'assigned',
-        causer: { name: 'Bob Smith' },
-        properties: { agent_name: 'Alice Chen' },
-        created_at: new Date(Date.now() - 600000).toISOString(),
-    },
-    {
-        id: 3,
-        type: 'priority_changed',
-        causer: { name: 'Alice Chen' },
-        properties: { from: 'medium', to: 'high' },
-        created_at: new Date(Date.now() - 1200000).toISOString(),
-    },
-    {
-        id: 4,
-        type: 'tag_added',
-        causer: { name: 'Alice Chen' },
-        properties: { tag: 'billing' },
-        created_at: new Date(Date.now() - 1800000).toISOString(),
-    },
-    {
-        id: 5,
-        type: 'replied',
-        causer: { name: 'Alice Chen' },
-        properties: {},
-        created_at: new Date(Date.now() - 2400000).toISOString(),
-    },
-    {
-        id: 6,
-        type: 'sla_breached',
-        causer: null,
-        properties: {},
-        created_at: new Date(Date.now() - 3600000).toISOString(),
-    },
-];
-
-export const Default = { args: { activities: sampleActivities } };
-export const Empty = { args: { activities: [] } };
-export const SingleItem = { args: { activities: [sampleActivities[0]] } };
+import ActivityTimeline from './ActivityTimeline.vue';
+
+export default {
+    title: 'Components/ActivityTimeline',
+    component: ActivityTimeline,
+};
+
+const sampleActivities = [
+    {
+        id: 1,
+        type: 'status_changed',
+        causer: { name: 'Alice Chen' },
+        properties: { from: 'open', to: 'in_progress' },
+        created_at: new Date(Date.now() - 300000).toISOString(),
+    },
+    {
+        id: 2,
+        type: 'assigned',
+        causer: { name: 'Bob Smith' },
+        properties: { agent_name: 'Alice Chen' },
+        created_at: new Date(Date.now() - 600000).toISOString(),
+    },
+    {
+        id: 3,
+        type: 'priority_changed',
+        causer: { name: 'Alice Chen' },
+        properties: { from: 'medium', to: 'high' },
+        created_at: new Date(Date.now() - 1200000).toISOString(),
+    },
+    {
+        id: 4,
+        type: 'tag_added',
+        causer: { name: 'Alice Chen' },
+        properties: { tag: 'billing' },
+        created_at: new Date(Date.now() - 1800000).toISOString(),
+    },
+    {
+        id: 5,
+        type: 'replied',
+        causer: { name: 'Alice Chen' },
+        properties: {},
+        created_at: new Date(Date.now() - 2400000).toISOString(),
+    },
+    {
+        id: 6,
+        type: 'sla_breached',
+        causer: null,
+        properties: {},
+        created_at: new Date(Date.now() - 3600000).toISOString(),
+    },
+];
+
+export const Default = { args: { activities: sampleActivities } };
+export const Empty = { args: { activities: [] } };
+export const SingleItem = { args: { activities: [sampleActivities[0]] } };