@escalated-dev/escalated 0.5.0 → 0.7.0

package/src/composables/useDebouncedSearch.js

@@ -0,0 +1,38 @@
+import { ref, watch, onUnmounted } from 'vue';
+
+/**
+ * Composable that debounces a reactive search term and invokes a callback.
+ *
+ * @param {Function} callback - Called with the search term value after the debounce delay.
+ * @param {number} [delay=300] - Debounce delay in milliseconds.
+ * @returns {{ searchTerm: import('vue').Ref<string>, clearSearch: () => void }}
+ */
+export function useDebouncedSearch(callback, delay = 300) {
+    const searchTerm = ref('');
+    let timer = null;
+
+    function clearTimer() {
+        if (timer !== null) {
+            window.clearTimeout(timer);
+            timer = null;
+        }
+    }
+
+    watch(searchTerm, (val) => {
+        clearTimer();
+        if (!val || val.length < 2) {
+            callback(null);
+            return;
+        }
+        timer = window.setTimeout(() => callback(val), delay);
+    });
+
+    function clearSearch() {
+        clearTimer();
+        searchTerm.value = '';
+    }
+
+    onUnmounted(clearTimer);
+
+    return { searchTerm, clearSearch };
+}

package/src/composables/useI18n.js

@@ -0,0 +1,80 @@
+import { ref, computed } from 'vue';
+import locales from '../locales/index.js';
+
+const currentLocale = ref('en');
+const customMessages = ref({});
+
+function resolve(obj, path) {
+    return path.split('.').reduce((acc, key) => acc?.[key], obj);
+}
+
+function applyReplacements(str, replacements) {
+    if (!replacements) return str;
+    return Object.entries(replacements).reduce(
+        (result, [key, value]) => result.replace(new RegExp(`:${key}`, 'g'), value),
+        str,
+    );
+}
+
+export function setLocale(locale) {
+    currentLocale.value = locale;
+}
+
+export function getLocale() {
+    return currentLocale.value;
+}
+
+export function mergeMessages(locale, messages) {
+    customMessages.value = {
+        ...customMessages.value,
+        [locale]: deepMerge(customMessages.value[locale] || {}, messages),
+    };
+}
+
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+        if (
+            source[key] &&
+            typeof source[key] === 'object' &&
+            !Array.isArray(source[key]) &&
+            target[key] &&
+            typeof target[key] === 'object'
+        ) {
+            result[key] = deepMerge(target[key], source[key]);
+        } else {
+            result[key] = source[key];
+        }
+    }
+    return result;
+}
+
+export function useI18n() {
+    const locale = computed(() => currentLocale.value);
+
+    function t(key, replacements) {
+        const lang = currentLocale.value;
+
+        // Try custom messages for current locale
+        const custom = resolve(customMessages.value[lang], key);
+        if (typeof custom === 'string') return applyReplacements(custom, replacements);
+
+        // Try built-in messages for current locale
+        const msg = resolve(locales[lang], key);
+        if (typeof msg === 'string') return applyReplacements(msg, replacements);
+
+        // Fallback to English
+        if (lang !== 'en') {
+            const customEn = resolve(customMessages.value.en, key);
+            if (typeof customEn === 'string') return applyReplacements(customEn, replacements);
+
+            const fallback = resolve(locales.en, key);
+            if (typeof fallback === 'string') return applyReplacements(fallback, replacements);
+        }
+
+        // Return raw key
+        return key;
+    }
+
+    return { t, locale };
+}

package/src/composables/usePluginExtensions.js

@@ -35,6 +35,80 @@ export function usePluginExtensions() {
         return [...widgets].sort((a, b) => (a.position || 100) - (b.position || 100));
     });
 
+    /**
+     * Ticket actions injected by plugins (e.g., "Escalate to Jira", "Send Approval").
+     * Each action: { id, label, icon, handler, position, permission, context }
+     * context: 'agent' | 'admin' | 'both'
+     */
+    const ticketActions = computed(() => {
+        const actions = pluginData.value.ticketActions || [];
+        return [...actions].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Sidebar panels injected by plugins for the ticket detail context panel.
+     * Each panel: { id, title, component, plugin, position, collapsed, icon }
+     */
+    const sidebarPanels = computed(() => {
+        const panels = pluginData.value.sidebarPanels || [];
+        return [...panels].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Custom ticket fields injected by plugins for ticket creation/edit forms.
+     * Each field: { id, label, type, name, options, required, position, plugin }
+     * type: 'text' | 'textarea' | 'select' | 'checkbox' | 'date' | 'number'
+     */
+    const ticketFields = computed(() => {
+        const fields = pluginData.value.ticketFields || [];
+        return [...fields].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Reply composer actions injected by plugins (e.g., "AI Suggest", "Insert KB Article").
+     * Each action: { id, label, icon, handler, component, plugin, position }
+     */
+    const composerActions = computed(() => {
+        const actions = pluginData.value.composerActions || [];
+        return [...actions].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Report widgets injected by plugins for the admin reports page.
+     * Each widget: { id, title, component, plugin, data, position, width }
+     */
+    const reportWidgets = computed(() => {
+        const widgets = pluginData.value.reportWidgets || [];
+        return [...widgets].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Settings panels injected by plugins for the admin settings page.
+     * Each panel: { id, title, component, plugin, position, icon }
+     */
+    const settingsPanels = computed(() => {
+        const panels = pluginData.value.settingsPanels || [];
+        return [...panels].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Notification channels registered by plugins (e.g., Slack, SMS, WhatsApp).
+     * Each channel: { id, label, icon, plugin, configComponent }
+     */
+    const notificationChannels = computed(() => {
+        const channels = pluginData.value.notificationChannels || [];
+        return [...channels].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Custom ticket list columns injected by plugins.
+     * Each column: { id, label, key, component, plugin, position, width }
+     */
+    const ticketListColumns = computed(() => {
+        const columns = pluginData.value.ticketListColumns || [];
+        return [...columns].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
     /**
      * Get plugin components for a specific page slot, sorted by position.
      *
@@ -52,15 +126,33 @@ export function usePluginExtensions() {
      * Check whether any plugins have registered extensions.
      */
     const hasPlugins = computed(() => {
-        return menuItems.value.length > 0
-            || dashboardWidgets.value.length > 0
-            || Object.keys(pluginData.value.pageComponents || {}).length > 0;
+        return (
+            menuItems.value.length > 0 ||
+            dashboardWidgets.value.length > 0 ||
+            Object.keys(pluginData.value.pageComponents || {}).length > 0 ||
+            ticketActions.value.length > 0 ||
+            sidebarPanels.value.length > 0 ||
+            ticketFields.value.length > 0 ||
+            composerActions.value.length > 0 ||
+            reportWidgets.value.length > 0 ||
+            settingsPanels.value.length > 0 ||
+            notificationChannels.value.length > 0 ||
+            ticketListColumns.value.length > 0
+        );
     });
 
     return {
         pluginData,
         menuItems,
         dashboardWidgets,
+        ticketActions,
+        sidebarPanels,
+        ticketFields,
+        composerActions,
+        reportWidgets,
+        settingsPanels,
+        notificationChannels,
+        ticketListColumns,
         getPageComponents,
         hasPlugins,
     };

package/src/composables/usePluginHooks.js

@@ -0,0 +1,65 @@
+import { getCurrentInstance } from 'vue';
+
+/**
+ * Composable for dispatching and consuming plugin hooks.
+ *
+ * Hooks allow plugins to react to events (e.g., ticket.created, ticket.replied)
+ * and to filter/modify data before it's processed (e.g., reply.beforeSubmit).
+ *
+ * Action hooks: fire-and-forget, all handlers run
+ * Filter hooks: chain handlers, each can modify the value
+ *
+ * @returns {Object} Hook dispatch functions
+ */
+export function usePluginHooks() {
+    const instance = getCurrentInstance();
+    const hookRegistry = instance?.appContext?.config?.globalProperties?.$escalatedHooks || {};
+
+    /**
+     * Dispatch an action hook. All registered handlers are called.
+     * @param {string} event - Hook name (e.g., 'ticket.created')
+     * @param  {...any} args - Arguments passed to handlers
+     */
+    async function dispatch(event, ...args) {
+        const handlers = hookRegistry[event] || [];
+        for (const { handler } of handlers) {
+            try {
+                await handler(...args);
+            } catch (err) {
+                console.warn(`[Escalated] Plugin hook "${event}" error:`, err);
+            }
+        }
+    }
+
+    /**
+     * Dispatch a filter hook. Each handler receives the value and can return a modified version.
+     * @param {string} event - Hook name (e.g., 'reply.beforeSubmit')
+     * @param {*} value - The value to filter
+     * @param  {...any} args - Additional arguments passed to handlers
+     * @returns {*} The filtered value
+     */
+    async function filter(event, value, ...args) {
+        const handlers = hookRegistry[event] || [];
+        let result = value;
+        for (const { handler } of handlers) {
+            try {
+                const modified = await handler(result, ...args);
+                if (modified !== undefined) result = modified;
+            } catch (err) {
+                console.warn(`[Escalated] Plugin filter "${event}" error:`, err);
+            }
+        }
+        return result;
+    }
+
+    /**
+     * Check if any handlers are registered for a given hook.
+     * @param {string} event - Hook name
+     * @returns {boolean}
+     */
+    function hasHook(event) {
+        return (hookRegistry[event] || []).length > 0;
+    }
+
+    return { dispatch, filter, hasHook };
+}

package/src/defineEscalatedPlugin.js

@@ -3,31 +3,41 @@
  *
  * Returns a Vue plugin object that registers components globally when installed.
  *
- * Usage in a plugin's main entry file:
+ * Usage:
  *
  *   import { defineEscalatedPlugin } from '@escalated-dev/escalated'
  *   import SalesWidget from './Components/SalesWidget.vue'
- *   import CustomSidebar from './Components/CustomSidebar.vue'
  *
  *   export default defineEscalatedPlugin({
  *       name: 'my-plugin',
  *       components: {
  *           SalesWidget,
- *           CustomSidebar,
  *       },
- *       setup(app) {
- *           // Optional: run custom setup logic when the plugin is installed
+ *       hooks: {
+ *           'ticket.created': (ticket) => { ... },
+ *           'ticket.replied': (ticket, reply) => { ... },
+ *           'ticket.statusChanged': (ticket, oldStatus, newStatus) => { ... },
+ *           'reply.beforeSubmit': (content) => { return modifiedContent; },
+ *       },
+ *       setup(app, ctx) {
+ *           // ctx contains: { provide }
  *       },
  *   })
  *
  * @param {Object} options
  * @param {string} options.name - Plugin identifier
  * @param {Object} [options.components] - Map of component name to component definition
- * @param {Function} [options.setup] - Optional setup callback receiving the Vue app instance
+ * @param {Object} [options.hooks] - Map of hook event name to handler function
+ * @param {Function} [options.setup] - Optional setup callback receiving the Vue app instance and context
  * @returns {Object} A Vue plugin object with an install() method
  */
 export function defineEscalatedPlugin(options = {}) {
     return {
+        // Metadata for plugin introspection
+        __escalated: true,
+        name: options.name || 'unknown',
+        hooks: options.hooks || {},
+
         install(app) {
             // Register all provided components globally
             if (options.components) {
@@ -36,9 +46,25 @@ export function defineEscalatedPlugin(options = {}) {
                 });
             }
 
-            // Run optional setup callback
+            // Register plugin hooks on a global event bus
+            if (options.hooks) {
+                const hookRegistry =
+                    app.config.globalProperties.$escalatedHooks || (app.config.globalProperties.$escalatedHooks = {});
+
+                Object.entries(options.hooks).forEach(([event, handler]) => {
+                    if (!hookRegistry[event]) hookRegistry[event] = [];
+                    hookRegistry[event].push({
+                        plugin: options.name,
+                        handler,
+                    });
+                });
+            }
+
+            // Run optional setup callback with context
             if (typeof options.setup === 'function') {
-                options.setup(app);
+                options.setup(app, {
+                    provide: app.provide.bind(app),
+                });
             }
 
             // Provide the plugin name for debugging

package/src/index.js

@@ -1,35 +1,72 @@
-// Plugin
-export { EscalatedPlugin } from './plugin'
-
-// Components
-export { default as ActivityTimeline } from './components/ActivityTimeline.vue'
-export { default as AssigneeSelect } from './components/AssigneeSelect.vue'
-export { default as AttachmentList } from './components/AttachmentList.vue'
-export { default as BulkActionBar } from './components/BulkActionBar.vue'
-export { default as EscalatedLayout } from './components/EscalatedLayout.vue'
-export { default as FileDropzone } from './components/FileDropzone.vue'
-export { default as FollowButton } from './components/FollowButton.vue'
-export { default as KeyboardShortcutHelp } from './components/KeyboardShortcutHelp.vue'
-export { default as MacroDropdown } from './components/MacroDropdown.vue'
-export { default as PinnedNotes } from './components/PinnedNotes.vue'
-export { default as PluginSlot } from './components/PluginSlot.vue'
-export { default as PresenceIndicator } from './components/PresenceIndicator.vue'
-export { default as PriorityBadge } from './components/PriorityBadge.vue'
-export { default as QuickFilters } from './components/QuickFilters.vue'
-export { default as ReplyComposer } from './components/ReplyComposer.vue'
-export { default as ReplyThread } from './components/ReplyThread.vue'
-export { default as SatisfactionRating } from './components/SatisfactionRating.vue'
-export { default as SlaTimer } from './components/SlaTimer.vue'
-export { default as StatsCard } from './components/StatsCard.vue'
-export { default as StatusBadge } from './components/StatusBadge.vue'
-export { default as TagSelect } from './components/TagSelect.vue'
-export { default as TicketFilters } from './components/TicketFilters.vue'
-export { default as TicketList } from './components/TicketList.vue'
-export { default as TicketSidebar } from './components/TicketSidebar.vue'
-
-// Composables
-export { useKeyboardShortcuts } from './composables/useKeyboardShortcuts'
-export { usePluginExtensions } from './composables/usePluginExtensions'
-
-// Plugin authoring helper
-export { defineEscalatedPlugin } from './defineEscalatedPlugin'
+// Plugin
+export { EscalatedPlugin } from './plugin';
+
+// Components
+export { default as ActivityTimeline } from './components/ActivityTimeline.vue';
+export { default as AgentLoadIndicator } from './components/AgentLoadIndicator.vue';
+export { default as AgentPerformanceCard } from './components/AgentPerformanceCard.vue';
+export { default as ArticleEditor } from './components/ArticleEditor.vue';
+export { default as AssigneeSelect } from './components/AssigneeSelect.vue';
+export { default as AttachmentList } from './components/AttachmentList.vue';
+export { default as AuditLogEntry } from './components/AuditLogEntry.vue';
+export { default as BulkActionBar } from './components/BulkActionBar.vue';
+export { default as CategoryTree } from './components/CategoryTree.vue';
+export { default as ChartWidget } from './components/ChartWidget.vue';
+export { default as CollisionWarning } from './components/CollisionWarning.vue';
+export { default as ConditionalFieldRules } from './components/ConditionalFieldRules.vue';
+export { default as ContextPanel } from './components/ContextPanel.vue';
+export { default as ContextPanelSection } from './components/ContextPanelSection.vue';
+export { default as CustomFieldRenderer } from './components/CustomFieldRenderer.vue';
+export { default as EscalatedLayout } from './components/EscalatedLayout.vue';
+export { default as FileDropzone } from './components/FileDropzone.vue';
+export { default as FollowButton } from './components/FollowButton.vue';
+export { default as KeyboardShortcutHelp } from './components/KeyboardShortcutHelp.vue';
+export { default as KnowledgePanel } from './components/KnowledgePanel.vue';
+export { default as KpiCard } from './components/KpiCard.vue';
+export { default as MacroDropdown } from './components/MacroDropdown.vue';
+export { default as PermissionMatrix } from './components/PermissionMatrix.vue';
+export { default as PinnedNotes } from './components/PinnedNotes.vue';
+export { default as PluginSlot } from './components/PluginSlot.vue';
+export { default as PresenceIndicator } from './components/PresenceIndicator.vue';
+export { default as PriorityBadge } from './components/PriorityBadge.vue';
+export { default as QuickFilters } from './components/QuickFilters.vue';
+export { default as ReplyComposer } from './components/ReplyComposer.vue';
+export { default as ReplyThread } from './components/ReplyThread.vue';
+export { default as SatisfactionRating } from './components/SatisfactionRating.vue';
+export { default as ScheduleEditor } from './components/ScheduleEditor.vue';
+export { default as SideConversation } from './components/SideConversation.vue';
+export { default as SideConversationList } from './components/SideConversationList.vue';
+export { default as SkillTagManager } from './components/SkillTagManager.vue';
+export { default as SlaComplianceChart } from './components/SlaComplianceChart.vue';
+export { default as SlaTimer } from './components/SlaTimer.vue';
+export { default as StatsCard } from './components/StatsCard.vue';
+export { default as StatusBadge } from './components/StatusBadge.vue';
+export { default as TagSelect } from './components/TagSelect.vue';
+export { default as TicketFilters } from './components/TicketFilters.vue';
+export { default as TicketLinkPanel } from './components/TicketLinkPanel.vue';
+export { default as TicketList } from './components/TicketList.vue';
+export { default as TicketMergeDialog } from './components/TicketMergeDialog.vue';
+export { default as TicketSidebar } from './components/TicketSidebar.vue';
+export { default as TicketTypeSelector } from './components/TicketTypeSelector.vue';
+export { default as TotpInput } from './components/TotpInput.vue';
+export { default as TwoFactorSetup } from './components/TwoFactorSetup.vue';
+
+// Composables
+export { useDebouncedSearch } from './composables/useDebouncedSearch';
+export { useKeyboardShortcuts } from './composables/useKeyboardShortcuts';
+export { usePluginExtensions } from './composables/usePluginExtensions';
+export { usePluginHooks } from './composables/usePluginHooks';
+
+// Utilities
+export { TICKET_STATUSES, TICKET_PRIORITIES, TICKET_TYPES, TICKET_TYPE_COLORS } from './utils/constants';
+export { timeAgo, slaClass } from './utils/formatting';
+
+// Plugin authoring helper
+export { defineEscalatedPlugin } from './defineEscalatedPlugin';
+
+// Import pages
+export { default as AdminImportIndex } from './pages/Admin/Import/Index.vue';
+export { default as AdminImportConnect } from './pages/Admin/Import/Connect.vue';
+export { default as AdminImportMapping } from './pages/Admin/Import/Mapping.vue';
+export { default as AdminImportReview } from './pages/Admin/Import/Review.vue';
+export { default as AdminImportProgress } from './pages/Admin/Import/Progress.vue';