@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/KnowledgePanel.vue

@@ -1,122 +1,122 @@
-<script setup>
-import { ref } from 'vue';
-
-defineProps({
-    ticketReference: { type: String, required: true },
-});
-
-const emit = defineEmits(['insert-link', 'quote']);
-const searchTerm = ref('');
-const expanded = ref(true);
-
-// Placeholder results for knowledge base integration
-const results = ref([]);
-const loading = ref(false);
-let debounceTimer = null;
-
-function onSearch(val) {
-    window.clearTimeout(debounceTimer);
-    if (!val || val.length < 2) {
-        results.value = [];
-        return;
-    }
-    debounceTimer = window.setTimeout(() => search(val), 300);
-}
-
-function search(term) {
-    loading.value = true;
-    // Placeholder: in production, this would call a knowledge base API
-    results.value = [
-        {
-            id: 1,
-            title: `How to resolve "${term}" issues`,
-            excerpt: `This article explains common solutions for ${term}-related problems that customers frequently encounter.`,
-            url: '#',
-        },
-        {
-            id: 2,
-            title: `${term} - FAQ`,
-            excerpt: `Frequently asked questions about ${term} and related features.`,
-            url: '#',
-        },
-        {
-            id: 3,
-            title: `Troubleshooting ${term}`,
-            excerpt: `Step-by-step troubleshooting guide for ${term} problems.`,
-            url: '#',
-        },
-    ];
-    loading.value = false;
-}
-
-function insertLink(article) {
-    emit('insert-link', article);
-}
-
-function quoteArticle(article) {
-    emit('quote', article);
-}
-</script>
-
-<template>
-    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
-        <button
-            class="flex w-full items-center justify-between text-sm font-semibold text-neutral-200"
-            @click="expanded = !expanded"
-        >
-            <span>Knowledge Base</span>
-            <svg
-                :class="['h-4 w-4 text-neutral-500 transition-transform', expanded && 'rotate-180']"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                viewBox="0 0 24 24"
-            >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-            </svg>
-        </button>
-
-        <div v-if="expanded" class="mt-3 space-y-3">
-            <input
-                v-model="searchTerm"
-                type="text"
-                placeholder="Search knowledge base..."
-                class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
-                @input="onSearch(searchTerm)"
-            />
-
-            <div v-if="loading" class="text-xs text-neutral-500">Searching...</div>
-
-            <div v-else-if="results.length" class="space-y-2">
-                <div
-                    v-for="article in results"
-                    :key="article.id"
-                    class="rounded-lg border border-white/[0.04] bg-white/[0.02] p-3"
-                >
-                    <h4 class="text-sm font-medium text-neutral-200">{{ article.title }}</h4>
-                    <p class="mt-1 text-xs text-neutral-400 line-clamp-2">{{ article.excerpt }}</p>
-                    <div class="mt-2 flex gap-2">
-                        <button
-                            class="rounded px-2 py-0.5 text-[10px] font-medium text-cyan-400 ring-1 ring-cyan-500/20 transition-colors hover:bg-cyan-500/10"
-                            @click="insertLink(article)"
-                        >
-                            Insert Link
-                        </button>
-                        <button
-                            class="rounded px-2 py-0.5 text-[10px] font-medium text-violet-400 ring-1 ring-violet-500/20 transition-colors hover:bg-violet-500/10"
-                            @click="quoteArticle(article)"
-                        >
-                            Quote
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <div v-else-if="searchTerm.length >= 2 && !loading" class="text-xs text-neutral-500">
-                No articles found.
-            </div>
-
-            <div v-else class="text-xs text-neutral-500">Search for articles to help resolve this ticket.</div>
-        </div>
-    </div>
-</template>
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+    ticketReference: { type: String, required: true },
+});
+
+const emit = defineEmits(['insert-link', 'quote']);
+const searchTerm = ref('');
+const expanded = ref(true);
+
+// Placeholder results for knowledge base integration
+const results = ref([]);
+const loading = ref(false);
+let debounceTimer = null;
+
+function onSearch(val) {
+    window.clearTimeout(debounceTimer);
+    if (!val || val.length < 2) {
+        results.value = [];
+        return;
+    }
+    debounceTimer = window.setTimeout(() => search(val), 300);
+}
+
+function search(term) {
+    loading.value = true;
+    // Placeholder: in production, this would call a knowledge base API
+    results.value = [
+        {
+            id: 1,
+            title: `How to resolve "${term}" issues`,
+            excerpt: `This article explains common solutions for ${term}-related problems that customers frequently encounter.`,
+            url: '#',
+        },
+        {
+            id: 2,
+            title: `${term} - FAQ`,
+            excerpt: `Frequently asked questions about ${term} and related features.`,
+            url: '#',
+        },
+        {
+            id: 3,
+            title: `Troubleshooting ${term}`,
+            excerpt: `Step-by-step troubleshooting guide for ${term} problems.`,
+            url: '#',
+        },
+    ];
+    loading.value = false;
+}
+
+function insertLink(article) {
+    emit('insert-link', article);
+}
+
+function quoteArticle(article) {
+    emit('quote', article);
+}
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
+        <button
+            class="flex w-full items-center justify-between text-sm font-semibold text-neutral-200"
+            @click="expanded = !expanded"
+        >
+            <span>Knowledge Base</span>
+            <svg
+                :class="['h-4 w-4 text-neutral-500 transition-transform', expanded && 'rotate-180']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+        <div v-if="expanded" class="mt-3 space-y-3">
+            <input
+                v-model="searchTerm"
+                type="text"
+                placeholder="Search knowledge base..."
+                class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="onSearch(searchTerm)"
+            />
+
+            <div v-if="loading" class="text-xs text-neutral-500">Searching...</div>
+
+            <div v-else-if="results.length" class="space-y-2">
+                <div
+                    v-for="article in results"
+                    :key="article.id"
+                    class="rounded-lg border border-white/[0.04] bg-white/[0.02] p-3"
+                >
+                    <h4 class="text-sm font-medium text-neutral-200">{{ article.title }}</h4>
+                    <p class="mt-1 text-xs text-neutral-400 line-clamp-2">{{ article.excerpt }}</p>
+                    <div class="mt-2 flex gap-2">
+                        <button
+                            class="rounded px-2 py-0.5 text-[10px] font-medium text-cyan-400 ring-1 ring-cyan-500/20 transition-colors hover:bg-cyan-500/10"
+                            @click="insertLink(article)"
+                        >
+                            Insert Link
+                        </button>
+                        <button
+                            class="rounded px-2 py-0.5 text-[10px] font-medium text-violet-400 ring-1 ring-violet-500/20 transition-colors hover:bg-violet-500/10"
+                            @click="quoteArticle(article)"
+                        >
+                            Quote
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div v-else-if="searchTerm.length >= 2 && !loading" class="text-xs text-neutral-500">
+                No articles found.
+            </div>
+
+            <div v-else class="text-xs text-neutral-500">Search for articles to help resolve this ticket.</div>
+        </div>
+    </div>
+</template>

package/src/components/KpiCard.stories.js

@@ -1,32 +1,32 @@
-import KpiCard from './KpiCard.vue';
-
-export default {
-    title: 'Components/KpiCard',
-    component: KpiCard,
-};
-
-export const Basic = { args: { label: 'Total Tickets', value: 1284 } };
-export const WithPositiveTrend = { args: { label: 'Resolved', value: 892, trend: 12 } };
-export const WithNegativeTrend = { args: { label: 'SLA Breaches', value: 7, trend: -34 } };
-
-export const WithIcon = {
-    args: {
-        label: 'Active Agents',
-        value: 24,
-        trend: 8,
-        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',
-    },
-};
-
-export const DashboardRow = {
-    render: () => ({
-        components: { KpiCard },
-        template: `
-            <div class="grid grid-cols-3 gap-4" style="max-width: 800px;">
-                <KpiCard label="Total Tickets" :value="1284" :trend="5" icon="M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859" />
-                <KpiCard label="Avg Response Time" value="1h 42m" :trend="-18" icon="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-                <KpiCard label="CSAT Score" value="94%" :trend="3" icon="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
-            </div>
-        `,
-    }),
-};
+import KpiCard from './KpiCard.vue';
+
+export default {
+    title: 'Components/KpiCard',
+    component: KpiCard,
+};
+
+export const Basic = { args: { label: 'Total Tickets', value: 1284 } };
+export const WithPositiveTrend = { args: { label: 'Resolved', value: 892, trend: 12 } };
+export const WithNegativeTrend = { args: { label: 'SLA Breaches', value: 7, trend: -34 } };
+
+export const WithIcon = {
+    args: {
+        label: 'Active Agents',
+        value: 24,
+        trend: 8,
+        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',
+    },
+};
+
+export const DashboardRow = {
+    render: () => ({
+        components: { KpiCard },
+        template: `
+            <div class="grid grid-cols-3 gap-4" style="max-width: 800px;">
+                <KpiCard label="Total Tickets" :value="1284" :trend="5" icon="M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859" />
+                <KpiCard label="Avg Response Time" value="1h 42m" :trend="-18" icon="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <KpiCard label="CSAT Score" value="94%" :trend="3" icon="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+            </div>
+        `,
+    }),
+};

package/src/components/KpiCard.vue

@@ -1,88 +1,88 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-defineProps({
-    label: { type: String, required: true },
-    value: { type: [Number, String], required: true },
-    trend: { type: Number, default: null },
-    icon: { type: String, default: null },
-});
-
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-</script>
-
-<template>
-    <div
-        :class="[
-            'rounded-xl border p-5',
-            escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
-        ]"
-    >
-        <div class="flex items-start justify-between">
-            <div>
-                <div :class="['text-[13px] font-medium', escDark ? 'text-neutral-500' : 'text-gray-500']">
-                    {{ label }}
-                </div>
-                <div :class="['mt-2 text-2xl font-bold tracking-tight', escDark ? 'text-white' : 'text-gray-900']">
-                    {{ value }}
-                </div>
-            </div>
-            <div
-                v-if="icon"
-                :class="[
-                    'flex h-10 w-10 items-center justify-center rounded-lg',
-                    escDark ? 'bg-white/[0.04]' : 'bg-gray-100',
-                ]"
-            >
-                <svg
-                    :class="['h-5 w-5', escDark ? 'text-neutral-500' : 'text-gray-400']"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    viewBox="0 0 24 24"
-                >
-                    <path stroke-linecap="round" stroke-linejoin="round" :d="icon" />
-                </svg>
-            </div>
-        </div>
-        <div v-if="trend !== null && trend !== 0" class="mt-3 flex items-center gap-1">
-            <svg
-                v-if="trend > 0"
-                :class="['h-4 w-4', escDark ? 'text-emerald-400' : 'text-emerald-500']"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-            >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
-            </svg>
-            <svg
-                v-else
-                :class="['h-4 w-4', escDark ? 'text-red-400' : 'text-red-500']"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-            >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25" />
-            </svg>
-            <span
-                :class="[
-                    'text-xs font-medium',
-                    trend > 0
-                        ? escDark
-                            ? 'text-emerald-400'
-                            : 'text-emerald-600'
-                        : escDark
-                          ? 'text-red-400'
-                          : 'text-red-600',
-                ]"
-            >
-                {{ Math.abs(trend) }}%
-            </span>
-        </div>
-    </div>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+
+defineProps({
+    label: { type: String, required: true },
+    value: { type: [Number, String], required: true },
+    trend: { type: Number, default: null },
+    icon: { type: String, default: null },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+</script>
+
+<template>
+    <div
+        :class="[
+            'rounded-xl border p-5',
+            escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
+        ]"
+    >
+        <div class="flex items-start justify-between">
+            <div>
+                <div :class="['text-[13px] font-medium', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                    {{ label }}
+                </div>
+                <div :class="['mt-2 text-2xl font-bold tracking-tight', escDark ? 'text-white' : 'text-gray-900']">
+                    {{ value }}
+                </div>
+            </div>
+            <div
+                v-if="icon"
+                :class="[
+                    'flex h-10 w-10 items-center justify-center rounded-lg',
+                    escDark ? 'bg-white/[0.04]' : 'bg-gray-100',
+                ]"
+            >
+                <svg
+                    :class="['h-5 w-5', escDark ? 'text-neutral-500' : 'text-gray-400']"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" :d="icon" />
+                </svg>
+            </div>
+        </div>
+        <div v-if="trend !== null && trend !== 0" class="mt-3 flex items-center gap-1">
+            <svg
+                v-if="trend > 0"
+                :class="['h-4 w-4', escDark ? 'text-emerald-400' : 'text-emerald-500']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
+            </svg>
+            <svg
+                v-else
+                :class="['h-4 w-4', escDark ? 'text-red-400' : 'text-red-500']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25" />
+            </svg>
+            <span
+                :class="[
+                    'text-xs font-medium',
+                    trend > 0
+                        ? escDark
+                            ? 'text-emerald-400'
+                            : 'text-emerald-600'
+                        : escDark
+                          ? 'text-red-400'
+                          : 'text-red-600',
+                ]"
+            >
+                {{ Math.abs(trend) }}%
+            </span>
+        </div>
+    </div>
+</template>