@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/components/ChatThread.vue

@@ -0,0 +1,197 @@
+<script setup>
+import { ref, computed, inject, watch, nextTick, onMounted } from 'vue';
+import ChatBubble from './ChatBubble.vue';
+import { useI18n } from '../composables/useI18n';
+
+const props = defineProps({
+    messages: { type: Array, default: () => [] },
+    typingUser: { type: String, default: null },
+    currentUserId: { type: [Number, String], default: null },
+});
+
+const { t } = useI18n();
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const threadContainer = ref(null);
+const isScrolledUp = ref(false);
+const hasNewMessages = ref(false);
+
+// Determine if user is near bottom of scroll
+function isNearBottom() {
+    const el = threadContainer.value;
+    if (!el) return true;
+    return el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+}
+
+function onScroll() {
+    isScrolledUp.value = !isNearBottom();
+    if (!isScrolledUp.value) {
+        hasNewMessages.value = false;
+    }
+}
+
+function scrollToBottom() {
+    const el = threadContainer.value;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+    isScrolledUp.value = false;
+    hasNewMessages.value = false;
+}
+
+// Auto-scroll on new messages
+watch(
+    () => props.messages.length,
+    async () => {
+        await nextTick();
+        if (isNearBottom()) {
+            scrollToBottom();
+        } else {
+            hasNewMessages.value = true;
+        }
+    },
+);
+
+onMounted(() => {
+    nextTick(() => scrollToBottom());
+});
+
+/**
+ * Determine whether to show avatar for a message:
+ * Show on the first message of a consecutive group by the same author.
+ */
+function shouldShowAvatar(index) {
+    if (index === 0) return true;
+    const prev = props.messages[index - 1];
+    const curr = props.messages[index];
+    return prev.author?.id !== curr.author?.id;
+}
+
+/**
+ * Determine whether to show a time separator between messages.
+ * Show when there's a >5 minute gap.
+ */
+function shouldShowTimeSeparator(index) {
+    if (index === 0) return true;
+    const prev = props.messages[index - 1];
+    const curr = props.messages[index];
+    if (!prev.created_at || !curr.created_at) return false;
+    const gap = new Date(curr.created_at) - new Date(prev.created_at);
+    return gap > 5 * 60 * 1000;
+}
+
+/**
+ * Show timestamp on the last message of a group or when there's a time gap.
+ */
+function shouldShowTimestamp(index) {
+    if (index === props.messages.length - 1) return true;
+    return shouldShowTimeSeparator(index + 1);
+}
+
+function formatTimeSeparator(dateStr) {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffDays = Math.floor((now - date) / 86400000);
+
+    if (diffDays === 0) {
+        return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+    }
+    if (diffDays === 1) {
+        return 'Yesterday ' + date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+    }
+    return date.toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+
+function isAgentMessage(message) {
+    if (message.is_agent !== undefined) return message.is_agent;
+    if (props.currentUserId && message.author?.id) {
+        return String(message.author.id) === String(props.currentUserId);
+    }
+    return false;
+}
+</script>
+
+<template>
+    <div class="relative flex flex-col" style="min-height: 200px">
+        <div
+            ref="threadContainer"
+            class="flex-1 space-y-1 overflow-y-auto p-4"
+            style="max-height: 500px"
+            @scroll="onScroll"
+        >
+            <!-- Empty state -->
+            <div
+                v-if="!messages.length"
+                :class="['py-12 text-center text-sm', escDark ? 'text-neutral-600' : 'text-gray-400']"
+            >
+                {{ t('chat.empty_state') }}
+            </div>
+
+            <template v-for="(message, index) in messages" :key="message.id || index">
+                <!-- Time separator -->
+                <div
+                    v-if="shouldShowTimeSeparator(index)"
+                    :class="['flex items-center gap-3 py-2', escDark ? 'text-neutral-600' : 'text-gray-400']"
+                >
+                    <div :class="['flex-1 border-t', escDark ? 'border-neutral-800' : 'border-gray-200']"></div>
+                    <span class="text-[10px] font-medium">
+                        {{ formatTimeSeparator(message.created_at) }}
+                    </span>
+                    <div :class="['flex-1 border-t', escDark ? 'border-neutral-800' : 'border-gray-200']"></div>
+                </div>
+
+                <!-- Chat bubble -->
+                <ChatBubble
+                    :message="message"
+                    :is-agent="isAgentMessage(message)"
+                    :show-avatar="shouldShowAvatar(index)"
+                    :show-timestamp="shouldShowTimestamp(index)"
+                />
+            </template>
+
+            <!-- Typing indicator -->
+            <div v-if="typingUser" class="flex items-center gap-2 pl-10 pt-1">
+                <div
+                    :class="[
+                        'flex items-center gap-1 rounded-2xl px-4 py-2',
+                        escDark ? 'bg-neutral-800' : 'bg-gray-100',
+                    ]"
+                >
+                    <div class="flex gap-1">
+                        <span
+                            v-for="i in 3"
+                            :key="i"
+                            :class="[
+                                'inline-block h-1.5 w-1.5 rounded-full animate-bounce',
+                                escDark ? 'bg-neutral-500' : 'bg-gray-400',
+                            ]"
+                            :style="{ animationDelay: `${(i - 1) * 150}ms` }"
+                        ></span>
+                    </div>
+                    <span :class="['ml-2 text-xs', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                        {{ t('chat.typing', { name: typingUser }) }}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <!-- New messages pill -->
+        <button
+            v-if="hasNewMessages"
+            :class="[
+                'absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full px-4 py-1.5 text-xs font-medium shadow-lg transition-all',
+                escDark ? 'bg-cyan-500 text-white hover:bg-cyan-400' : 'bg-blue-600 text-white hover:bg-blue-500',
+            ]"
+            @click="scrollToBottom"
+        >
+            {{ t('chat.new_messages') }}
+        </button>
+    </div>
+</template>

package/src/components/CollisionWarning.stories.js

@@ -0,0 +1,30 @@
+import CollisionWarning from './CollisionWarning.vue';
+
+export default {
+    title: 'Components/CollisionWarning',
+    component: CollisionWarning,
+};
+
+export const SingleTyper = {
+    args: {
+        typers: [{ name: 'Alice Chen' }],
+    },
+};
+
+export const TwoTypers = {
+    args: {
+        typers: [{ name: 'Alice Chen' }, { name: 'Bob Smith' }],
+    },
+};
+
+export const ManyTypers = {
+    args: {
+        typers: [{ name: 'Alice Chen' }, { name: 'Bob Smith' }, { name: 'Carol Davis' }, { name: 'Dan Lee' }],
+    },
+};
+
+export const NoTypers = {
+    args: {
+        typers: [],
+    },
+};

package/src/components/CollisionWarning.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { inject, computed } from 'vue';
+
+defineProps({
+    typers: { type: Array, default: () => [] },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+function typersText(typers) {
+    const names = typers.map((t) => t.name);
+    if (names.length === 1) return `${names[0]} is typing a reply...`;
+    if (names.length === 2) return `${names[0]} and ${names[1]} are typing replies...`;
+    return `${names[0]} and ${names.length - 1} others are typing replies...`;
+}
+</script>
+
+<template>
+    <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="opacity-0 -translate-y-2"
+        enter-to-class="opacity-100 translate-y-0"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="opacity-100 translate-y-0"
+        leave-to-class="opacity-0 -translate-y-2"
+    >
+        <div
+            v-if="typers.length > 0"
+            role="alert"
+            aria-live="assertive"
+            :class="[
+                'flex items-center gap-2 rounded-lg px-3 py-2 ring-1',
+                escDark ? 'bg-amber-500/10 ring-amber-500/20' : 'bg-amber-50 ring-amber-200',
+            ]"
+        >
+            <!-- Pulsing indicator -->
+            <span class="relative flex h-2.5 w-2.5">
+                <span
+                    class="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-75"
+                ></span>
+                <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-amber-500"></span>
+            </span>
+
+            <!-- Avatars -->
+            <div class="flex -space-x-1.5">
+                <div
+                    v-for="typer in typers.slice(0, 3)"
+                    :key="typer.name"
+                    :class="[
+                        'flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-semibold ring-1',
+                        escDark
+                            ? 'bg-amber-500/30 text-amber-300 ring-amber-500/40'
+                            : 'bg-amber-100 text-amber-700 ring-amber-300',
+                    ]"
+                >
+                    {{ (typer.name || '?').charAt(0).toUpperCase() }}
+                </div>
+            </div>
+
+            <span :class="['text-xs font-medium', escDark ? 'text-amber-400' : 'text-amber-700']">
+                {{ typersText(typers) }}
+            </span>
+        </div>
+    </Transition>
+</template>

package/src/components/ConditionalFieldRules.vue

@@ -0,0 +1,135 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    availableFields: { type: Array, default: () => [] },
+    modelValue: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const rules = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
+
+function addRule() {
+    const updated = [
+        ...rules.value,
+        {
+            field: '',
+            operator: 'equals',
+            value: '',
+            target_field: '',
+        },
+    ];
+    emit('update:modelValue', updated);
+}
+
+function removeRule(index) {
+    const updated = rules.value.filter((_, i) => i !== index);
+    emit('update:modelValue', updated);
+}
+
+function updateRule(index, key, value) {
+    const updated = rules.value.map((rule, i) => (i === index ? { ...rule, [key]: value } : rule));
+    emit('update:modelValue', updated);
+}
+
+function getFieldOptions(fieldName) {
+    const field = props.availableFields.find((f) => f.name === fieldName || f.slug === fieldName);
+    return field?.options || [];
+}
+
+const operatorOptions = [
+    { value: 'equals', label: 'equals' },
+    { value: 'not_equals', label: 'does not equal' },
+    { value: 'contains', label: 'contains' },
+    { value: 'is_empty', label: 'is empty' },
+    { value: 'is_not_empty', label: 'is not empty' },
+];
+</script>
+
+<template>
+    <div class="space-y-3">
+        <div
+            v-for="(rule, index) in rules"
+            :key="index"
+            class="flex flex-wrap items-center gap-2 rounded-lg border border-white/[0.06] bg-neutral-950 p-3"
+        >
+            <span class="text-xs font-medium text-neutral-500">When</span>
+            <select
+                :value="rule.field"
+                class="rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @change="updateRule(index, 'field', $event.target.value)"
+            >
+                <option value="">Select field...</option>
+                <option v-for="f in availableFields" :key="f.name || f.slug" :value="f.name || f.slug">
+                    {{ f.label || f.name }}
+                </option>
+            </select>
+
+            <select
+                :value="rule.operator"
+                class="rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @change="updateRule(index, 'operator', $event.target.value)"
+            >
+                <option v-for="op in operatorOptions" :key="op.value" :value="op.value">
+                    {{ op.label }}
+                </option>
+            </select>
+
+            <template v-if="rule.operator !== 'is_empty' && rule.operator !== 'is_not_empty'">
+                <select
+                    v-if="getFieldOptions(rule.field).length"
+                    :value="rule.value"
+                    class="rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @change="updateRule(index, 'value', $event.target.value)"
+                >
+                    <option value="">Select value...</option>
+                    <option v-for="opt in getFieldOptions(rule.field)" :key="opt" :value="opt">
+                        {{ opt }}
+                    </option>
+                </select>
+                <input
+                    v-else
+                    :value="rule.value"
+                    type="text"
+                    placeholder="Value"
+                    class="w-32 rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @input="updateRule(index, 'value', $event.target.value)"
+                />
+            </template>
+
+            <span class="text-xs font-medium text-neutral-500">show</span>
+            <select
+                :value="rule.target_field"
+                class="rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @change="updateRule(index, 'target_field', $event.target.value)"
+            >
+                <option value="">Select target field...</option>
+                <option v-for="f in availableFields" :key="f.name || f.slug" :value="f.name || f.slug">
+                    {{ f.label || f.name }}
+                </option>
+            </select>
+
+            <button
+                type="button"
+                class="ml-auto rounded p-1 text-neutral-500 hover:bg-red-500/10 hover:text-red-400"
+                @click="removeRule(index)"
+            >
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+
+        <button
+            type="button"
+            class="rounded-lg border border-dashed border-white/10 px-4 py-2 text-sm text-neutral-500 hover:border-white/20 hover:text-neutral-300"
+            @click="addRule"
+        >
+            + Add Condition
+        </button>
+    </div>
+</template>

package/src/components/ContextPanel.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { inject, computed } from 'vue';
+
+defineProps({
+    visible: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:visible']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+function close() {
+    emit('update:visible', false);
+}
+</script>
+
+<template>
+    <transition
+        enter-active-class="transition-all duration-300 ease-out"
+        leave-active-class="transition-all duration-200 ease-in"
+        enter-from-class="translate-x-full opacity-0"
+        enter-to-class="translate-x-0 opacity-100"
+        leave-from-class="translate-x-0 opacity-100"
+        leave-to-class="translate-x-full opacity-0"
+    >
+        <div
+            v-if="visible"
+            :class="[
+                'fixed inset-y-0 right-0 z-40 w-80 overflow-y-auto border-l shadow-2xl backdrop-blur-sm lg:static lg:block lg:overflow-visible lg:shadow-none',
+                escDark ? 'border-white/[0.06] bg-neutral-900/95' : 'border-gray-200 bg-white',
+            ]"
+        >
+            <!-- Header -->
+            <div
+                :class="[
+                    'flex items-center justify-between border-b px-4 py-3',
+                    escDark ? 'border-white/[0.06]' : 'border-gray-200',
+                ]"
+            >
+                <h3 :class="['text-sm font-semibold', escDark ? 'text-neutral-200' : 'text-gray-900']">Context</h3>
+                <button
+                    type="button"
+                    :class="[
+                        'rounded p-1 lg:hidden',
+                        escDark
+                            ? 'text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300'
+                            : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                    ]"
+                    @click="close"
+                >
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Sections -->
+            <div>
+                <slot />
+            </div>
+        </div>
+    </transition>
+</template>

package/src/components/ContextPanelSection.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref, inject, computed } from 'vue';
+
+const props = defineProps({
+    title: { type: String, required: true },
+    icon: { type: String, default: '' },
+    defaultOpen: { type: Boolean, default: true },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const isOpen = ref(props.defaultOpen);
+</script>
+
+<template>
+    <div :class="['border-b last:border-b-0', escDark ? 'border-white/[0.06]' : 'border-gray-200']">
+        <button
+            type="button"
+            :aria-expanded="isOpen"
+            :class="[
+                'flex w-full items-center gap-2 px-4 py-3 text-left transition-colors',
+                escDark ? 'hover:bg-white/[0.02]' : 'hover:bg-gray-50',
+            ]"
+            @click="isOpen = !isOpen"
+        >
+            <svg
+                v-if="icon"
+                :class="['h-4 w-4 shrink-0', 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>
+            <span
+                :class="[
+                    'flex-1 text-xs font-semibold uppercase tracking-wider',
+                    escDark ? 'text-neutral-400' : 'text-gray-500',
+                ]"
+            >
+                {{ title }}
+            </span>
+            <svg
+                :class="[
+                    'h-4 w-4 transition-transform',
+                    escDark ? 'text-neutral-600' : 'text-gray-400',
+                    isOpen ? '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-show="isOpen" class="px-4 pb-4">
+            <slot />
+        </div>
+    </div>
+</template>