@vicket/create-support 1.1.1 → 1.1.2

package/templates-tailwind/nuxt/app/components/VicketTicketPage.vue

@@ -1,449 +0,0 @@
-<script setup lang="ts">
-/* ── Reactive state ─────────────────────────────── */
-const route = useRoute();
-const token = computed(() => (route.query.token as string) || "");
-const hasToken = computed(() => token.value.trim().length > 0);
-
-const thread = ref<TicketThread | null>(null);
-const content = ref("");
-const files = ref<File[]>([]);
-const isLoading = ref(true);
-const isSending = ref(false);
-const error = ref("");
-const success = ref("");
-
-/* ── Computed ───────────────────────────────────── */
-const firstReporterMessage = computed(() => {
-  if (!thread.value?.messages || thread.value.messages.length === 0) return null;
-  const sorted = [...thread.value.messages].sort(
-    (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
-  );
-  // Only treat as description if the very first message is from the reporter
-  return sorted[0].author_type === "reporter" ? sorted[0] : null;
-});
-
-const sortedMessages = computed(() => {
-  if (!thread.value?.messages) return [];
-  return [...thread.value.messages]
-    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
-    .filter((m) => !firstReporterMessage.value || m.id !== firstReporterMessage.value.id);
-});
-
-const summaryAnswers = computed(() => {
-  if (!thread.value?.answers) return [];
-  return thread.value.answers.filter((answer) => {
-    if (answer.attachments && answer.attachments.length > 0) return true;
-    if (answer.answer && answer.answer.trim().length > 0) return true;
-    return false;
-  });
-});
-
-/* ── Helpers ────────────────────────────────────── */
-const removeFile = (index: number) => {
-  files.value = files.value.filter((_, i) => i !== index);
-};
-
-const onFileChange = (event: Event) => {
-  const input = event.target as HTMLInputElement;
-  const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
-  const newFiles = Array.from(input.files || []).filter((f) => ALLOWED_TYPES.includes(f.type));
-  files.value = [...files.value, ...newFiles];
-  input.value = "";
-};
-
-const avatarColors = (authorType: string) =>
-  authorType === "reporter"
-    ? "bg-blue-600/15 text-blue-600"
-    : authorType === "user"
-      ? "bg-emerald-500/15 text-emerald-500"
-      : "bg-slate-400/20 text-slate-400";
-
-/* ── Data loading ───────────────────────────────── */
-const loadThread = async () => {
-  if (!hasToken.value) {
-    isLoading.value = false;
-    error.value = "Missing ticket token in URL.";
-    return;
-  }
-  isLoading.value = true;
-  error.value = "";
-  try {
-    const data = await fetchThread(token.value);
-    thread.value = data;
-  } catch (loadError) {
-    error.value = loadError instanceof Error ? loadError.message : "Unexpected error.";
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const submitReply = async () => {
-  error.value = "";
-  success.value = "";
-  if (!content.value.trim() && files.value.length === 0) {
-    error.value = "Reply content is required.";
-    return;
-  }
-  if (!hasToken.value) {
-    error.value = "Missing ticket token.";
-    return;
-  }
-  isSending.value = true;
-  try {
-    await sendReply(token.value, content.value.trim(), files.value);
-    content.value = "";
-    files.value = [];
-    success.value = "Reply sent.";
-    await loadThread();
-  } catch (replyError) {
-    error.value = replyError instanceof Error ? replyError.message : "Unexpected error.";
-  } finally {
-    isSending.value = false;
-  }
-};
-
-watch(
-  () => token.value,
-  () => { void loadThread(); },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
-    <div class="mx-auto w-full max-w-3xl px-4 py-8">
-      <!-- Back link -->
-      <div class="mb-6">
-        <a href="/support" class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 no-underline transition-colors hover:text-slate-900">
-          <!-- IconArrowLeft -->
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
-          Back to support
-        </a>
-      </div>
-
-      <!-- Error alert -->
-      <div v-if="error" class="mb-4">
-        <div
-          class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900"
-          role="alert"
-        >
-          <span class="mt-0.5 shrink-0">
-            <!-- IconAlert -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
-          </span>
-          <span class="flex-1">{{ error }}</span>
-          <button
-            type="button"
-            class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100"
-            aria-label="Dismiss"
-            @click="error = ''"
-          >
-            <!-- IconX -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
-          </button>
-        </div>
-      </div>
-
-      <!-- Success alert -->
-      <div v-if="success" class="mb-4">
-        <div
-          class="flex items-start gap-3 rounded-xl border border-green-200 bg-green-50 p-4 text-sm text-green-900"
-          role="alert"
-        >
-          <span class="mt-0.5 shrink-0">
-            <!-- IconCheck -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
-          </span>
-          <span class="flex-1">{{ success }}</span>
-          <button
-            type="button"
-            class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100"
-            aria-label="Dismiss"
-            @click="success = ''"
-          >
-            <!-- IconX -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
-          </button>
-        </div>
-      </div>
-
-      <!-- Loading skeleton -->
-      <div v-if="isLoading" class="space-y-6">
-        <div>
-          <div class="mb-3 h-7 w-64 animate-pulse rounded-lg bg-slate-200" />
-          <div class="flex gap-2">
-            <div class="h-6 w-20 animate-pulse rounded-full bg-slate-200" />
-            <div class="h-6 w-16 animate-pulse rounded-full bg-slate-200" />
-          </div>
-        </div>
-        <div class="rounded-2xl border border-slate-200 bg-white">
-          <div class="border-b border-slate-200 px-5 py-4">
-            <div class="h-5 w-28 animate-pulse rounded bg-slate-200" />
-          </div>
-          <div v-for="i in 3" :key="i" class="border-b border-slate-200 px-5 py-4 last:border-b-0">
-            <div class="flex gap-3">
-              <div class="h-7 w-7 shrink-0 animate-pulse rounded-full bg-slate-200" />
-              <div class="flex-1 space-y-2">
-                <div class="h-4 w-32 animate-pulse rounded bg-slate-200" />
-                <div class="h-14 w-full animate-pulse rounded-lg bg-slate-200" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Thread content -->
-      <div v-if="!isLoading && thread" class="space-y-6">
-        <!-- Header -->
-        <div>
-          <div class="flex flex-wrap items-start justify-between gap-3">
-            <h1 class="m-0 text-xl font-semibold tracking-tight text-slate-900 sm:text-2xl">{{ thread.title }}</h1>
-            <span
-              v-if="thread.id"
-              class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-0.5 text-xs font-semibold font-mono text-slate-500"
-            >
-              #{{ thread.id.slice(0, 8) }}
-            </span>
-          </div>
-          <div
-            v-if="(thread.status?.label && thread.status.label.toLowerCase() !== 'open') || (thread.priority?.label && thread.priority.label.toLowerCase() !== 'low')"
-            class="mt-2.5 flex flex-wrap items-center gap-2"
-          >
-            <span
-              v-if="thread.status?.label && thread.status.label.toLowerCase() !== 'open'"
-              class="inline-flex items-center rounded-full border border-blue-600/20 bg-blue-50 px-2.5 py-0.5 text-xs font-semibold text-blue-600"
-            >
-              {{ thread.status.label }}
-            </span>
-            <span
-              v-if="thread.priority?.label && thread.priority.label.toLowerCase() !== 'low'"
-              class="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700"
-            >
-              {{ thread.priority.label }}
-            </span>
-          </div>
-        </div>
-
-        <!-- Summary (ticket form answers) -->
-        <div v-if="summaryAnswers.length > 0" class="rounded-2xl border border-slate-200 bg-white shadow-sm">
-          <div class="flex items-center gap-2 border-b border-slate-200 px-5 py-3.5">
-            <!-- IconFile -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
-            <h2 class="m-0 text-sm font-semibold text-slate-900">Summary</h2>
-          </div>
-          <div class="space-y-3 p-5">
-            <div v-for="answer in summaryAnswers" :key="answer.id" class="rounded-xl bg-slate-50/70 p-4">
-              <p class="mb-2.5 text-xs font-medium text-slate-500">{{ answer.question_label || "Question" }}</p>
-              <!-- File attachments -->
-              <div v-if="answer.attachments && answer.attachments.length > 0" class="flex flex-wrap gap-1.5">
-                <a
-                  v-for="att in answer.attachments"
-                  :key="att.id"
-                  :href="att.url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-500 no-underline transition-colors hover:border-slate-300 hover:text-slate-900"
-                >
-                  <!-- IconPaperclip -->
-                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" /></svg>
-                  {{ att.original_filename }}
-                </a>
-              </div>
-              <!-- File answer placeholder -->
-              <p v-else-if="isFileAnswer(answer.answer)" class="text-sm italic text-slate-500">File uploaded</p>
-              <!-- Text answer -->
-              <p v-else class="whitespace-pre-wrap break-words rounded-md border border-slate-200/60 bg-white px-3 py-2 text-sm leading-relaxed text-slate-900">
-                {{ formatAnswerText(answer.answer) || "-" }}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Description (first reporter message) -->
-        <div v-if="firstReporterMessage" class="rounded-2xl border border-slate-200 bg-white shadow-sm">
-          <div class="flex items-center gap-2 border-b border-slate-200 px-5 py-3.5">
-            <!-- IconFile -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
-            <h2 class="m-0 text-sm font-semibold text-slate-900">Description</h2>
-          </div>
-          <div class="p-5">
-            <div
-              class="vk-message-content text-sm leading-relaxed text-slate-500"
-              v-html="sanitizeHtml(firstReporterMessage.content)"
-            />
-            <div
-              v-if="firstReporterMessage.attachments && firstReporterMessage.attachments.length > 0"
-              class="mt-3 flex flex-wrap gap-1.5"
-            >
-              <a
-                v-for="att in firstReporterMessage.attachments"
-                :key="att.id"
-                :href="att.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-500 no-underline transition-colors hover:border-slate-300 hover:text-slate-900"
-              >
-                <!-- IconPaperclip -->
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" /></svg>
-                {{ att.original_filename }}
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <!-- Comments -->
-        <div class="rounded-2xl border border-slate-200 bg-white shadow-sm">
-          <div class="flex items-center gap-2 border-b border-slate-200 px-5 py-3.5">
-            <!-- IconMessageCircle -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
-            <h2 class="m-0 text-sm font-semibold text-slate-900">Comments</h2>
-          </div>
-
-          <!-- Reply form -->
-          <div class="border-b border-slate-200 p-5">
-            <form class="space-y-3" @submit.prevent="submitReply">
-              <textarea
-                v-model="content"
-                class="min-h-[80px] w-full resize-y rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-                placeholder="Write your reply..."
-              />
-              <div class="flex flex-wrap items-center justify-between gap-3">
-                <div class="flex flex-wrap items-center gap-2">
-                  <!-- File upload -->
-                  <label class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-500 transition-colors hover:border-slate-300 hover:text-slate-900">
-                    <!-- IconPaperclip -->
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" /></svg>
-                    Browse files
-                    <input
-                      type="file"
-                      class="hidden"
-                      multiple
-                      accept="image/jpeg,image/png,image/gif,image/webp"
-                      @change="onFileChange"
-                    />
-                  </label>
-                  <!-- File chips -->
-                  <span
-                    v-for="(file, i) in files"
-                    :key="`${file.name}-${i}`"
-                    class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs text-slate-500"
-                  >
-                    <!-- IconPaperclip -->
-                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" /></svg>
-                    <span class="max-w-[120px] truncate">{{ file.name }}</span>
-                    <button
-                      type="button"
-                      class="flex cursor-pointer items-center border-none bg-transparent p-0 text-slate-500 transition-colors hover:text-red-600"
-                      :aria-label="`Remove ${file.name}`"
-                      @click="removeFile(i)"
-                    >
-                      <!-- IconX -->
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
-                    </button>
-                  </span>
-                </div>
-                <!-- Send button -->
-                <button
-                  class="inline-flex items-center gap-2 rounded-lg border-none bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed"
-                  type="submit"
-                  :disabled="isSending"
-                >
-                  <template v-if="isSending">
-                    <!-- IconSpinner -->
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
-                    Sending...
-                  </template>
-                  <template v-else>
-                    <!-- IconSend -->
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" /><path d="m21.854 2.147-10.94 10.939" /></svg>
-                    Send
-                  </template>
-                </button>
-              </div>
-            </form>
-          </div>
-
-          <!-- Empty messages -->
-          <div v-if="sortedMessages.length === 0" class="px-5 py-12 text-center">
-            <div class="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-slate-50 text-slate-500">
-              <!-- IconMessageCircle -->
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
-            </div>
-            <p class="m-0 text-sm text-slate-500">No messages yet. Be the first to reply!</p>
-          </div>
-
-          <!-- Message list -->
-          <div v-else class="divide-y divide-slate-200">
-            <div v-for="message in sortedMessages" :key="message.id" class="flex gap-3 px-5 py-3.5">
-              <!-- System message -->
-              <template v-if="message.author_type === 'system'">
-                <div
-                  :class="cn('mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-bold leading-none', avatarColors('system'))"
-                  aria-hidden="true"
-                >
-                  S
-                </div>
-                <div class="min-w-0 flex-1">
-                  <div class="flex flex-wrap items-baseline gap-2">
-                    <span class="text-xs font-medium text-slate-500">System</span>
-                    <span class="text-xs text-slate-500/50">{{ formatDate(message.created_at) }}</span>
-                  </div>
-                  <p class="mt-1 text-xs italic text-slate-500">{{ message.content.replace(/<[^>]*>/g, "") }}</p>
-                </div>
-              </template>
-
-              <!-- Reporter / Support message -->
-              <template v-else>
-                <div
-                  :class="cn('mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-bold leading-none', avatarColors(message.author_type))"
-                  aria-hidden="true"
-                >
-                  {{ (AUTHOR_LABELS[message.author_type] || "?")[0] }}
-                </div>
-                <div class="min-w-0 flex-1">
-                  <div class="flex flex-wrap items-baseline gap-2">
-                    <span class="text-sm font-medium text-slate-900">{{ AUTHOR_LABELS[message.author_type] || message.author_type }}</span>
-                    <span class="text-xs text-slate-500/50">{{ formatDate(message.created_at) }}</span>
-                  </div>
-                  <div
-                    :class="cn(
-                      'vk-message-content mt-1.5 break-words rounded-xl px-4 py-3 text-sm leading-relaxed',
-                      message.author_type === 'user' ? 'border border-blue-600/10 bg-blue-50 text-slate-800' : 'border border-slate-200 bg-slate-50 text-slate-800',
-                    )"
-                    v-html="sanitizeHtml(message.content)"
-                  />
-                  <div
-                    v-if="message.attachments && message.attachments.length > 0"
-                    class="mt-2 flex flex-wrap gap-1.5"
-                  >
-                    <a
-                      v-for="att in message.attachments"
-                      :key="att.id"
-                      class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-500 no-underline transition-all duration-150 hover:border-slate-300 hover:text-slate-900"
-                      :href="att.url"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      <!-- IconPaperclip -->
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" /></svg>
-                      {{ att.original_filename }}
-                    </a>
-                  </div>
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.vk-message-content p { margin-bottom: 0.5rem; }
-.vk-message-content p:last-child { margin-bottom: 0; }
-.vk-message-content a { color: #2563eb; text-decoration: underline; }
-.vk-message-content ul, .vk-message-content ol { margin: 0.25rem 0; padding-left: 1.5rem; }
-.vk-message-content pre { overflow-x: auto; border-radius: 6px; background: #f8fafc; padding: 0.75rem; font-size: 0.75rem; }
-.vk-message-content code { font-family: monospace; font-size: 0.85em; }
-</style>