@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/components/ReplyThread.vue

@@ -13,7 +13,10 @@ const props = defineProps({
     pinnable: { type: Boolean, default: false },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 const { t } = useI18n();
 
 function formatDate(date) {
@@ -22,42 +25,91 @@ function formatDate(date) {
 
 function togglePin(reply) {
     if (!props.routePrefix || !props.ticketReference) return;
-    router.post(route(`${props.routePrefix}.tickets.pin`, [props.ticketReference, reply.id]), {}, { preserveScroll: true });
+    router.post(
+        route(`${props.routePrefix}.tickets.pin`, [props.ticketReference, reply.id]),
+        {},
+        { preserveScroll: true },
+    );
 }
 </script>
 
 <template>
-    <div class="space-y-4">
-        <div v-for="reply in replies" :key="reply.id"
-             :class="['rounded-xl border p-4', escDark
-                 ? (reply.is_internal_note ? 'border-amber-500/20 bg-amber-500/5' : 'border-white/[0.06] bg-neutral-900/60')
-                 : (reply.is_internal_note ? 'border-yellow-200 bg-yellow-50' : 'border-gray-200 bg-white')]">
+    <div class="space-y-4" role="feed" aria-label="Reply thread">
+        <div
+            v-for="reply in replies"
+            :key="reply.id"
+            :class="[
+                'rounded-xl border p-4',
+                escDark
+                    ? reply.is_internal_note
+                        ? 'border-amber-500/20 bg-amber-500/5'
+                        : 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]'
+                    : reply.is_internal_note
+                      ? 'border-yellow-200 bg-yellow-50'
+                      : 'border-gray-200 bg-white',
+            ]"
+        >
             <div class="mb-2 flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                    <span :class="['font-medium', escDark ? 'text-gray-200' : 'text-gray-900']">{{ reply.author?.name || t('ticket.unknown') }}</span>
-                    <span v-if="reply.is_internal_note"
-                          :class="['rounded px-1.5 py-0.5 text-xs font-medium', escDark ? 'bg-amber-500/15 text-amber-400' : 'bg-yellow-200 text-yellow-800']">
+                    <span
+                        :class="['font-medium', escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-900']"
+                        >{{ reply.author?.name || t('ticket.unknown') }}</span
+                    >
+                    <span
+                        v-if="reply.is_internal_note"
+                        :class="[
+                            'rounded px-1.5 py-0.5 text-xs font-medium',
+                            escDark ? 'bg-amber-500/15 text-amber-400' : 'bg-yellow-200 text-yellow-800',
+                        ]"
+                    >
                         {{ t('reply.internal_note') }}
                     </span>
-                    <span v-if="reply.is_pinned"
-                          :class="['rounded px-1.5 py-0.5 text-xs font-medium', escDark ? 'bg-cyan-500/15 text-cyan-400' : 'bg-blue-100 text-blue-700']">
+                    <span
+                        v-if="reply.is_pinned"
+                        :class="[
+                            'rounded px-1.5 py-0.5 text-xs font-medium',
+                            escDark ? 'bg-cyan-500/15 text-cyan-400' : 'bg-blue-100 text-blue-700',
+                        ]"
+                    >
                         {{ t('reply.pinned') }}
                     </span>
                 </div>
                 <div class="flex items-center gap-2">
-                    <button v-if="pinnable && reply.is_internal_note" @click="togglePin(reply)"
-                            :class="['rounded px-2 py-0.5 text-xs font-medium transition-colors',
-                                     escDark
-                                         ? (reply.is_pinned ? 'bg-cyan-500/15 text-cyan-400 hover:bg-cyan-500/25' : 'text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300')
-                                         : (reply.is_pinned ? 'bg-blue-100 text-blue-700 hover:bg-blue-200' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600')]">
+                    <button
+                        v-if="pinnable && reply.is_internal_note"
+                        :class="[
+                            'rounded px-2 py-0.5 text-xs font-medium transition-colors',
+                            escDark
+                                ? reply.is_pinned
+                                    ? 'bg-cyan-500/15 text-cyan-400 hover:bg-cyan-500/25'
+                                    : 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                                : reply.is_pinned
+                                  ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+                                  : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                        ]"
+                        @click="togglePin(reply)"
+                    >
                         {{ reply.is_pinned ? t('reply.unpin') : t('reply.pin') }}
                     </button>
-                    <span :class="['text-xs', escDark ? 'text-gray-500' : 'text-gray-500']">{{ formatDate(reply.created_at) }}</span>
+                    <span :class="['text-xs', escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500']">{{
+                        formatDate(reply.created_at)
+                    }}</span>
                 </div>
             </div>
-            <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-gray-300' : 'text-gray-700']" v-html="sanitizeHtml(reply.body)"></div>
+            <div
+                :class="[
+                    'prose prose-sm max-w-none',
+                    escDark ? 'prose-invert text-[var(--esc-panel-text-secondary)]' : 'text-gray-700',
+                ]"
+                v-html="sanitizeHtml(reply.body)"
+            ></div>
             <AttachmentList v-if="reply.attachments?.length" :attachments="reply.attachments" class="mt-3" />
         </div>
-        <div v-if="!replies?.length" :class="['py-8 text-center text-sm', escDark ? 'text-gray-500' : 'text-gray-500']">{{ t('ticket.no_replies') }}</div>
+        <div
+            v-if="!replies?.length"
+            :class="['py-8 text-center text-sm', escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500']"
+        >
+            {{ t('ticket.no_replies') }}
+        </div>
     </div>
 </template>

package/src/components/SatisfactionRating.vue

@@ -7,7 +7,10 @@ const props = defineProps({
     existingRating: { type: Object, default: null },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 const hoveredStar = ref(0);
 const selectedRating = ref(props.existingRating?.rating || 0);
 const comment = ref(props.existingRating?.comment || '');
@@ -41,86 +44,135 @@ function leaveStars() {
 function submit() {
     if (!selectedRating.value || processing.value || isReadOnly.value) return;
     processing.value = true;
-    router.post(props.action, {
-        rating: selectedRating.value,
-        comment: comment.value || null,
-    }, {
-        preserveScroll: true,
-        onSuccess: () => {
-            submitted.value = true;
+    router.post(
+        props.action,
+        {
+            rating: selectedRating.value,
+            comment: comment.value || null,
         },
-        onFinish: () => {
-            processing.value = false;
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                submitted.value = true;
+            },
+            onFinish: () => {
+                processing.value = false;
+            },
         },
-    });
+    );
 }
 </script>
 
 <template>
-    <div :class="['rounded-xl border p-5',
-                  escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white']">
-        <h3 :class="['text-sm font-semibold',
-                      escDark ? 'text-neutral-200' : 'text-gray-900']">
+    <div
+        :class="[
+            'rounded-xl border p-5',
+            escDark ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]' : 'border-gray-200 bg-white',
+        ]"
+    >
+        <h3 :class="['text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-900']">
             {{ isReadOnly ? 'Customer Rating' : 'How was your experience?' }}
         </h3>
 
         <!-- Stars -->
         <div class="mt-3 flex items-center gap-1" @mouseleave="leaveStars">
-            <button v-for="star in 5" :key="star"
-                    @click="selectStar(star)"
-                    @mouseenter="hoverStar(star)"
-                    :disabled="isReadOnly"
-                    :class="['transition-transform', !isReadOnly && 'hover:scale-110', isReadOnly && 'cursor-default']">
+            <button
+                v-for="star in 5"
+                :key="star"
+                :disabled="isReadOnly"
+                :aria-label="'Rate ' + star + ' star' + (star !== 1 ? 's' : '')"
+                :class="['transition-transform', !isReadOnly && 'hover:scale-110', isReadOnly && 'cursor-default']"
+                @click="selectStar(star)"
+                @mouseenter="hoverStar(star)"
+            >
                 <!-- Filled star -->
-                <svg v-if="star <= displayRating" class="h-7 w-7" viewBox="0 0 24 24" fill="currentColor"
-                     :class="escDark ? 'text-amber-400' : 'text-yellow-400'">
-                    <path d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" />
+                <svg
+                    v-if="star <= displayRating"
+                    class="h-7 w-7"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    :class="escDark ? 'text-amber-400' : 'text-yellow-400'"
+                >
+                    <path
+                        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
+                    />
                 </svg>
                 <!-- Empty star -->
-                <svg v-else class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
-                     :class="escDark ? 'text-neutral-600' : 'text-gray-300'">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="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" />
+                <svg
+                    v-else
+                    class="h-7 w-7"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                    :class="escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-300'"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="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"
+                    />
                 </svg>
             </button>
-            <span v-if="displayRating > 0"
-                  :class="['ml-2 text-sm font-medium',
-                           escDark ? 'text-neutral-400' : 'text-gray-500']">
+            <span
+                v-if="displayRating > 0"
+                :class="[
+                    'ml-2 text-sm font-medium',
+                    escDark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-500',
+                ]"
+            >
                 {{ ratingLabels[displayRating] }}
             </span>
         </div>
 
         <!-- Comment -->
         <div v-if="!isReadOnly" class="mt-4">
-            <textarea v-model="comment" rows="3"
-                      placeholder="Any additional feedback? (optional)"
-                      :class="['w-full rounded-lg border px-3 py-2 text-sm focus:outline-none',
-                               escDark
-                                   ? 'border-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:ring-1 focus:ring-white/10'
-                                   : 'border-gray-300 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500']">
+            <textarea
+                v-model="comment"
+                rows="3"
+                placeholder="Any additional feedback? (optional)"
+                :class="[
+                    'w-full rounded-lg border px-3 py-2 text-sm focus:outline-none',
+                    escDark
+                        ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:ring-1 focus:ring-[var(--esc-panel-border-input)]'
+                        : 'border-gray-300 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500',
+                ]"
+            >
             </textarea>
         </div>
 
         <!-- Read-only comment display -->
         <div v-if="isReadOnly && existingRating.comment" class="mt-3">
-            <p :class="['text-sm italic', escDark ? 'text-neutral-400' : 'text-gray-600']">
+            <p :class="['text-sm italic', escDark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-600']">
                 "{{ existingRating.comment }}"
             </p>
         </div>
 
         <!-- Submit -->
         <div v-if="!isReadOnly" class="mt-3">
-            <div v-if="submitted"
-                 :class="['rounded-lg px-3 py-2 text-sm font-medium',
-                          escDark ? 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20' : 'bg-green-50 text-green-700']">
+            <div
+                v-if="submitted"
+                :class="[
+                    'rounded-lg px-3 py-2 text-sm font-medium',
+                    escDark
+                        ? 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20'
+                        : 'bg-green-50 text-green-700',
+                ]"
+            >
                 Thank you for your feedback!
             </div>
-            <button v-else @click="submit"
-                    :disabled="!selectedRating || processing"
-                    :class="['rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
-                             escDark
-                                 ? 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400'
-                                 : 'bg-blue-600 hover:bg-blue-700',
-                             (!selectedRating || processing) && 'cursor-not-allowed opacity-40']">
+            <button
+                v-else
+                :disabled="!selectedRating || processing"
+                :class="[
+                    'rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
+                    escDark
+                        ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]'
+                        : 'bg-blue-600 hover:bg-blue-700',
+                    (!selectedRating || processing) && 'cursor-not-allowed opacity-40',
+                ]"
+                @click="submit"
+            >
                 Submit Rating
             </button>
         </div>

package/src/components/ScheduleEditor.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        default: () => ({
+            monday: { start: '09:00', end: '17:00' },
+            tuesday: { start: '09:00', end: '17:00' },
+            wednesday: { start: '09:00', end: '17:00' },
+            thursday: { start: '09:00', end: '17:00' },
+            friday: { start: '09:00', end: '17:00' },
+            saturday: { start: '', end: '' },
+            sunday: { start: '', end: '' },
+        }),
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const days = [
+    { key: 'monday', label: 'Monday' },
+    { key: 'tuesday', label: 'Tuesday' },
+    { key: 'wednesday', label: 'Wednesday' },
+    { key: 'thursday', label: 'Thursday' },
+    { key: 'friday', label: 'Friday' },
+    { key: 'saturday', label: 'Saturday' },
+    { key: 'sunday', label: 'Sunday' },
+];
+
+const timeOptions = computed(() => {
+    const options = [];
+    for (let h = 0; h < 24; h++) {
+        for (let m = 0; m < 60; m += 30) {
+            const hh = String(h).padStart(2, '0');
+            const mm = String(m).padStart(2, '0');
+            options.push(`${hh}:${mm}`);
+        }
+    }
+    options.push('24:00');
+    return options;
+});
+
+function updateDay(dayKey, field, value) {
+    const updated = { ...props.modelValue };
+    updated[dayKey] = { ...(updated[dayKey] || { start: '', end: '' }), [field]: value };
+    emit('update:modelValue', updated);
+}
+
+function toggleDay(dayKey) {
+    const updated = { ...props.modelValue };
+    const current = updated[dayKey];
+    if (current && current.start) {
+        updated[dayKey] = { start: '', end: '' };
+    } else {
+        updated[dayKey] = { start: '09:00', end: '17:00' };
+    }
+    emit('update:modelValue', updated);
+}
+
+function isDayEnabled(dayKey) {
+    const day = props.modelValue[dayKey];
+    return day && day.start;
+}
+</script>
+
+<template>
+    <div class="space-y-2">
+        <div
+            v-for="day in days"
+            :key="day.key"
+            class="flex items-center gap-3 rounded-lg border border-white/[0.06] bg-neutral-950/50 px-3 py-2"
+        >
+            <label class="flex w-28 items-center gap-2">
+                <input
+                    type="checkbox"
+                    :checked="isDayEnabled(day.key)"
+                    class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
+                    @change="toggleDay(day.key)"
+                />
+                <span class="text-sm font-medium text-neutral-300">{{ day.label }}</span>
+            </label>
+
+            <template v-if="isDayEnabled(day.key)">
+                <select
+                    :value="modelValue[day.key]?.start || '09:00'"
+                    class="rounded-lg border border-white/10 bg-neutral-950 px-2 py-1 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @change="updateDay(day.key, 'start', $event.target.value)"
+                >
+                    <option v-for="t in timeOptions" :key="'s-' + t" :value="t">{{ t }}</option>
+                </select>
+                <span class="text-xs text-neutral-500">to</span>
+                <select
+                    :value="modelValue[day.key]?.end || '17:00'"
+                    class="rounded-lg border border-white/10 bg-neutral-950 px-2 py-1 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @change="updateDay(day.key, 'end', $event.target.value)"
+                >
+                    <option v-for="t in timeOptions" :key="'e-' + t" :value="t">{{ t }}</option>
+                </select>
+            </template>
+            <span v-else class="text-xs text-neutral-500">Closed</span>
+        </div>
+    </div>
+</template>

package/src/components/SideConversation.vue

@@ -0,0 +1,165 @@
+<script setup>
+import { ref, inject, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const props = defineProps({
+    conversation: { type: Object, required: true },
+    ticketReference: { type: String, required: true },
+});
+
+const emit = defineEmits(['updated']);
+const replyBody = ref('');
+const submitting = ref(false);
+const expanded = ref(false);
+
+function submitReply() {
+    if (!replyBody.value.trim() || submitting.value) return;
+    submitting.value = true;
+
+    router.post(
+        route('escalated.admin.tickets.side-conversations.reply', [props.ticketReference, props.conversation.id]),
+        { body: replyBody.value },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                replyBody.value = '';
+                emit('updated');
+            },
+            onFinish: () => {
+                submitting.value = false;
+            },
+        },
+    );
+}
+
+function closeConversation() {
+    router.post(
+        route('escalated.admin.tickets.side-conversations.close', [props.ticketReference, props.conversation.id]),
+        {},
+        {
+            preserveScroll: true,
+            onSuccess: () => emit('updated'),
+        },
+    );
+}
+</script>
+
+<template>
+    <div
+        :class="[
+            'rounded-lg border p-3',
+            escDark ? 'border-white/[0.06] bg-white/[0.02]' : 'border-gray-200 bg-gray-50',
+        ]"
+    >
+        <button
+            class="flex w-full items-center justify-between"
+            :aria-expanded="expanded"
+            @click="expanded = !expanded"
+        >
+            <div class="flex items-center gap-2">
+                <span
+                    :class="[
+                        'inline-flex h-5 items-center rounded px-1.5 text-[10px] font-semibold uppercase',
+                        conversation.status === 'open'
+                            ? escDark
+                                ? 'bg-emerald-500/15 text-emerald-400'
+                                : 'bg-emerald-100 text-emerald-700'
+                            : escDark
+                              ? 'bg-neutral-500/15 text-neutral-400'
+                              : 'bg-gray-100 text-gray-500',
+                    ]"
+                >
+                    {{ conversation.status }}
+                </span>
+                <span :class="['text-sm font-medium', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                    {{ conversation.subject }}
+                </span>
+                <span :class="['text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']">
+                    {{ conversation.channel }}
+                </span>
+            </div>
+            <svg
+                :class="[
+                    'h-4 w-4 transition-transform',
+                    escDark ? 'text-neutral-500' : 'text-gray-400',
+                    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">
+            <!-- Replies -->
+            <div
+                v-for="reply in conversation.replies"
+                :key="reply.id"
+                :class="['border-l-2 pl-3', escDark ? 'border-white/[0.06]' : 'border-gray-200']"
+            >
+                <div class="flex items-center gap-2">
+                    <span :class="['text-xs font-medium', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                        {{ reply.author?.name || 'System' }}
+                    </span>
+                    <span :class="['text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']">
+                        {{ reply.created_at }}
+                    </span>
+                </div>
+                <p :class="['mt-1 whitespace-pre-wrap text-sm', escDark ? 'text-neutral-400' : 'text-gray-600']">
+                    {{ reply.body }}
+                </p>
+            </div>
+
+            <div
+                v-if="!conversation.replies?.length"
+                :class="['text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']"
+            >
+                No replies yet.
+            </div>
+
+            <!-- Reply form -->
+            <div v-if="conversation.status === 'open'" class="pt-2">
+                <textarea
+                    v-model="replyBody"
+                    rows="2"
+                    placeholder="Write a reply..."
+                    :class="[
+                        'w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1',
+                        escDark
+                            ? 'border-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:ring-white/10'
+                            : 'border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-blue-400 focus:ring-blue-200',
+                    ]"
+                ></textarea>
+                <div class="mt-2 flex items-center gap-2">
+                    <button
+                        :disabled="!replyBody.trim() || submitting"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-xs font-medium text-white transition-all hover:from-cyan-400 hover:to-violet-400',
+                            (!replyBody.trim() || submitting) && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="submitReply"
+                    >
+                        Reply
+                    </button>
+                    <button
+                        :class="[
+                            'rounded-lg px-3 py-1.5 text-xs',
+                            escDark ? 'text-neutral-400 hover:text-neutral-300' : 'text-gray-500 hover:text-gray-700',
+                        ]"
+                        @click="closeConversation"
+                    >
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>