@vicket/create-support 1.1.1 → 1.1.2

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

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import type { Template, FormValues } from "vicket";
+import { cn, initialFormValues, createTicket } from "vicket";
+
 /* ── Props / Emits ──────────────────────────────── */
 const props = defineProps<{
   open: boolean;

package/templates-tailwind/nuxt/app/pages/support.vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import type { SupportInitResponse } from "vicket";
+
+const { data: initData, error: fetchError } = await useFetch<SupportInitResponse>('/api/vicket/init');
+</script>
+
 <template>
-  <VicketSupportPage />
+  <VicketSupportContent
+    :init-data="initData?.data"
+    :init-error="fetchError?.message || ''"
+  />
 </template>

package/templates-tailwind/nuxt/app/pages/ticket.vue

@@ -1,3 +1,300 @@
+<script setup lang="ts">
+import type { TicketThread } from "vicket";
+import {
+  cn,
+  stripHtml,
+  sanitizeHtml,
+  formatDate,
+  isFileAnswer,
+  formatAnswerText,
+  AUTHOR_LABELS,
+} from "vicket";
+
+/* ── Route & token ─────────────────────────────── */
+const route = useRoute();
+const token = computed(() => String(route.query.token || ""));
+
+/* ── SSR data fetching ─────────────────────────── */
+const { data: threadRaw, error: fetchError, refresh } = await useFetch<{
+  success?: boolean;
+  error?: string;
+  error_code?: string;
+  data?: TicketThread;
+}>('/api/vicket/ticket', {
+  query: { token: token.value },
+});
+
+const thread = computed<TicketThread | null>(() => {
+  const raw = threadRaw.value;
+  if (!raw?.success || !raw?.data) return null;
+  return raw.data;
+});
+
+const error = ref(
+  fetchError.value
+    ? "Failed to load ticket."
+    : threadRaw.value && !threadRaw.value.success
+      ? (threadRaw.value.error_code === "ticket-link-expired"
+          ? "This link has expired. A new secure link has been sent to your email."
+          : threadRaw.value.error || "Failed to load ticket.")
+      : "",
+);
+
+/* ── 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(),
+  );
+  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;
+  });
+});
+
+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";
+
+/* ── Reply callback ────────────────────────────── */
+const onReplied = async () => {
+  await refresh();
+};
+</script>
+
 <template>
-  <VicketTicketPage />
+  <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>
+
+      <!-- Thread content -->
+      <div v-if="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="text-sm leading-relaxed text-slate-500 [&_a]:text-blue-600 [&_a]:underline [&_code]:font-mono [&_code]:text-[0.85em] [&_ol]:my-1 [&_ol]:pl-6 [&_p:last-child]:mb-0 [&_p]:mb-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-slate-50 [&_pre]:p-3 [&_pre]:text-xs [&_ul]:my-1 [&_ul]:pl-6"
+              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 (client interactive) -->
+          <VicketReplyForm :token="token" @replied="onReplied" />
+
+          <!-- 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(
+                      'mt-1.5 break-words rounded-xl px-4 py-3 text-sm leading-relaxed [&_a]:text-blue-600 [&_a]:underline [&_code]:font-mono [&_code]:text-[0.85em] [&_ol]:my-1 [&_ol]:pl-6 [&_p:last-child]:mb-0 [&_p]:mb-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-slate-50 [&_pre]:p-3 [&_pre]:text-xs [&_ul]:my-1 [&_ul]:pl-6',
+                      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>

package/templates-tailwind/nuxt/server/api/vicket/[...path].ts

@@ -0,0 +1,2 @@
+import { createVicketProxy } from "vicket/nuxt";
+export default createVicketProxy();

package/templates-tailwind/sveltekit/src/lib/vicket/ReplyForm.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { sendReply } from "vicket";
+  import { invalidateAll } from "$app/navigation";
+
+  let { token }: { token: string } = $props();
+
+  let content = $state("");
+  let files = $state<File[]>([]);
+  let isSending = $state(false);
+  let error = $state("");
+  let success = $state("");
+
+  function removeFile(index: number) {
+    files = files.filter((_, i) => i !== index);
+  }
+
+  function onFileChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const newFiles = Array.from(input.files || []);
+    files = [...files, ...newFiles];
+    input.value = "";
+  }
+
+  async function onSubmitReply(event: SubmitEvent) {
+    event.preventDefault();
+    error = "";
+    success = "";
+
+    if (!content.trim() && files.length === 0) {
+      error = "Reply content is required.";
+      return;
+    }
+
+    if (!token.trim()) {
+      error = "Missing ticket token.";
+      return;
+    }
+
+    isSending = true;
+    try {
+      await sendReply(token, content.trim(), files);
+      content = "";
+      files = [];
+      success = "Reply sent.";
+      await invalidateAll();
+    } catch (replyError) {
+      error = replyError instanceof Error ? replyError.message : "Unexpected error.";
+    } finally {
+      isSending = false;
+    }
+  }
+</script>
+
+<!-- Alerts -->
+{#if error}
+  <div class="mb-4 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">
+      <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" onclick={() => (error = "")} class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100" aria-label="Dismiss">
+      <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>
+{/if}
+{#if success}
+  <div class="mb-4 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">
+      <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" onclick={() => (success = "")} class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100" aria-label="Dismiss">
+      <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>
+{/if}
+
+<!-- Compose area -->
+<div class="border-b border-slate-100 px-5 py-4">
+  <form class="space-y-3" onsubmit={onSubmitReply}>
+    <textarea
+      class="min-h-[80px] w-full resize-y rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 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"
+      bind:value={content}
+      placeholder="Write your reply..."
+    ></textarea>
+
+    <div class="flex items-center justify-between gap-3">
+      <!-- File input -->
+      <div class="flex flex-wrap items-center gap-2">
+        <label class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 transition-colors hover:bg-slate-50">
+          <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" multiple class="hidden" onchange={onFileChange} />
+        </label>
+        {#each files as file, i}
+          <span 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">
+            <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>
+            <span class="max-w-[120px] truncate">{file.name}</span>
+            <button
+              type="button"
+              onclick={() => removeFile(i)}
+              class="flex cursor-pointer items-center border-none bg-transparent p-0 text-slate-400 transition-colors hover:text-red-600"
+              aria-label="Remove {file.name}"
+            >
+              <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="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+            </button>
+          </span>
+        {/each}
+      </div>
+
+      <!-- Send -->
+      <button
+        class="inline-flex shrink-0 items-center gap-2 rounded-lg border-none bg-blue-600 px-5 py-2 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"
+        disabled={isSending}
+        type="submit"
+      >
+        {#if isSending}
+          <svg width="14" height="14" 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...
+        {:else}
+          <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="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
+        {/if}
+      </button>
+    </div>
+  </form>
+</div>

package/templates-tailwind/sveltekit/src/lib/vicket/{SupportPage.svelte → SupportContent.svelte}

@@ -1,17 +1,17 @@
 <script lang="ts">
-  import type { Template, Article, Faq } from "$lib/vicket";
-  import { fetchInit, sanitizeHtml, stripHtml, cn } from "$lib/vicket";
+  import { cn, stripHtml, sanitizeHtml, type Template, type Article, type Faq } from "vicket";
   import TicketDialog from "./TicketDialog.svelte";
 
+  let { initData = null, initError = '' } = $props();
+
   /* ---------------------------------------------- */
   /*  State                                          */
   /* ---------------------------------------------- */
-  let templates = $state<Template[]>([]);
-  let articles = $state<Article[]>([]);
-  let faqs = $state<Faq[]>([]);
-  let websiteName = $state("Support");
-  let isLoading = $state(true);
-  let error = $state("");
+  let templates = $state<Template[]>(initData?.templates || []);
+  let articles = $state<Article[]>(initData?.articles || []);
+  let faqs = $state<Faq[]>(initData?.faqs || []);
+  let websiteName = $state(initData?.website?.name || "Support");
+  let error = $state(initError || "");
   let searchQuery = $state("");
   let dialogOpen = $state(false);
   let selectedArticle = $state<Article | null>(null);
@@ -53,74 +53,12 @@
     }
     openFaqIds = next;
   }
-
-  /* ---------------------------------------------- */
-  /*  Load data on mount                             */
-  /* ---------------------------------------------- */
-  $effect(() => {
-    let isMounted = true;
-    const load = async () => {
-      isLoading = true;
-      error = "";
-      try {
-        const data = await fetchInit();
-        if (!isMounted) return;
-        templates = data.templates || [];
-        articles = data.articles || [];
-        faqs = data.faqs || [];
-        websiteName = data.website?.name || "Support";
-      } catch (loadError) {
-        if (!isMounted) return;
-        error = loadError instanceof Error ? loadError.message : "Unexpected error.";
-      } finally {
-        if (isMounted) isLoading = false;
-      }
-    };
-    load();
-    return () => { isMounted = false; };
-  });
 </script>
 
-<!-- --------------------------------------- -->
-<!--  Loading skeleton                       -->
-<!-- --------------------------------------- -->
-{#if isLoading}
-  <div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
-    <div class="mx-auto max-w-5xl px-6 py-16">
-      <!-- Header skeleton -->
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <div class="h-8 w-40 animate-pulse rounded-lg bg-slate-200" aria-hidden="true"></div>
-          <div class="mt-2 h-5 w-64 animate-pulse rounded-lg bg-slate-200" aria-hidden="true"></div>
-        </div>
-        <div class="h-12 w-44 animate-pulse rounded-full bg-slate-200" aria-hidden="true"></div>
-      </div>
-      <!-- Search skeleton -->
-      <div class="mt-10">
-        <div class="h-12 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
-      </div>
-      <!-- Content skeleton -->
-      <div class="mt-10 grid gap-10 md:grid-cols-2">
-        <div class="space-y-3">
-          <div class="h-5 w-36 animate-pulse rounded-lg bg-slate-200" aria-hidden="true"></div>
-          <div class="h-16 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
-          <div class="h-16 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
-          <div class="h-16 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
-        </div>
-        <div class="space-y-3">
-          <div class="h-5 w-52 animate-pulse rounded-lg bg-slate-200" aria-hidden="true"></div>
-          <div class="h-14 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
-          <div class="h-14 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
-          <div class="h-14 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-
 <!-- --------------------------------------- -->
 <!--  Article viewer                         -->
 <!-- --------------------------------------- -->
-{:else if selectedArticle}
+{#if selectedArticle}
   <div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
     <div class="mx-auto max-w-5xl px-6 py-16">
       <!-- Hero stays visible -->