@escalated-dev/escalated 0.7.0 → 0.8.0

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

@@ -1,30 +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: [],
-    },
-};
+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

@@ -1,68 +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>
+<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

@@ -1,135 +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>
+<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>