@vicket/create-support 1.1.1

package/templates/sveltekit/src/routes/ticket/+page.svelte

@@ -0,0 +1,418 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { page } from "$app/state";
+  import type { TicketThread } from "$lib/vicket/types";
+  import { cn, sanitizeHtml, stripHtml, formatDate, isFileAnswer, formatAnswerText } from "$lib/vicket/utils";
+  import { AUTHOR_LABELS, fetchTicketThread, sendReply } from "$lib/vicket/api";
+
+  /* ---------------------------------------------- */
+  /*  State                                          */
+  /* ---------------------------------------------- */
+  let thread = $state<TicketThread | null>(null);
+  let content = $state("");
+  let files = $state<File[]>([]);
+  let isLoading = $state(true);
+  let isSending = $state(false);
+  let error = $state("");
+  let success = $state("");
+
+  /* ---------------------------------------------- */
+  /*  Derived                                        */
+  /* ---------------------------------------------- */
+  let token = $derived(page.url.searchParams.get("token") || "");
+  let hasToken = $derived(token.trim().length > 0);
+
+  let firstReporterMessage = $derived.by(() => {
+    if (!thread?.messages || thread.messages.length === 0) return null;
+    const sorted = [...thread.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;
+  });
+
+  let sortedMessages = $derived.by(() => {
+    if (!thread?.messages) return [];
+    return [...thread.messages]
+      .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+      .filter((m) => !firstReporterMessage || m.id !== firstReporterMessage.id);
+  });
+
+  let summaryAnswers = $derived.by(() => {
+    if (!thread?.answers) return [];
+    return thread.answers.filter((answer) => {
+      if (answer.attachments && answer.attachments.length > 0) return true;
+      if (answer.answer && answer.answer.trim().length > 0) return true;
+      return false;
+    });
+  });
+
+  /* ---------------------------------------------- */
+  /*  Functions                                      */
+  /* ---------------------------------------------- */
+  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 loadThread() {
+    if (!hasToken) {
+      isLoading = false;
+      error = "Missing ticket token in URL.";
+      return;
+    }
+
+    isLoading = true;
+    error = "";
+    try {
+      const data = await fetchTicketThread(token);
+      thread = data;
+    } catch (loadError) {
+      error = loadError instanceof Error ? loadError.message : "Unexpected error.";
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  async function onSubmitReply(event: SubmitEvent) {
+    event.preventDefault();
+    error = "";
+    success = "";
+
+    if (!content.trim() && files.length === 0) {
+      error = "Reply content is required.";
+      return;
+    }
+
+    if (!hasToken) {
+      error = "Missing ticket token.";
+      return;
+    }
+
+    isSending = true;
+    try {
+      await sendReply(token, content.trim(), files);
+      content = "";
+      files = [];
+      success = "Reply sent.";
+      await loadThread();
+    } catch (replyError) {
+      error = replyError instanceof Error ? replyError.message : "Unexpected error.";
+    } finally {
+      isSending = false;
+    }
+  }
+
+  onMount(() => {
+    void loadThread();
+  });
+</script>
+
+<div class="vk-shell">
+  <div class="vk-page vk-animate-in">
+    <!-- Back link -->
+    <div class="vk-ticket-badges">
+      <a href="/support" class="vk-back-link">
+        &#8592; Back to support
+      </a>
+    </div>
+
+    <!-- Alerts -->
+    {#if error}
+      <div class={cn("vk-alert vk-slide-up", "error")} role="alert">
+        <span>&#9888;</span>
+        <span>{error}</span>
+        <button
+          type="button"
+          onclick={() => (error = "")}
+          class="vk-alert-dismiss"
+          aria-label="Dismiss"
+        >
+          &#10005;
+        </button>
+      </div>
+    {/if}
+    {#if success}
+      <div class={cn("vk-alert vk-slide-up", "success")} role="alert">
+        <span>&#10003;</span>
+        <span>{success}</span>
+        <button
+          type="button"
+          onclick={() => (success = "")}
+          class="vk-alert-dismiss"
+          aria-label="Dismiss"
+        >
+          &#10005;
+        </button>
+      </div>
+    {/if}
+
+    <!-- Loading skeleton -->
+    {#if isLoading}
+      <div class="vk-stack vk-animate-in">
+        <!-- Header skeleton -->
+        <div>
+          <div class="vk-skeleton" aria-hidden="true">
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          </div>
+          <div class="vk-compose-files">
+            <span class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+            <span class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          </div>
+        </div>
+        <!-- Messages skeleton -->
+        <div class="vk-section-card">
+          <div class="vk-section-header">
+            <span class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          </div>
+          {#each [1, 2, 3] as i (i)}
+            <div class="vk-message">
+              <div class="vk-avatar vk-skeleton" aria-hidden="true">&nbsp;</div>
+              <div class="vk-message-content">
+                <div class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
+                <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
+              </div>
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <!-- Thread -->
+    {#if !isLoading && thread}
+      <div class="vk-stack">
+        <!-- Header -->
+        <div>
+          <div class="vk-ticket-header">
+            <h1 class="vk-ticket-title">{thread.title}</h1>
+            {#if thread.id}
+              <span class={cn("vk-badge", "id")}>
+                #{thread.id.slice(0, 8)}
+              </span>
+            {/if}
+          </div>
+          {#if (thread.status?.label && thread.status.label.toLowerCase() !== "open") || (thread.priority?.label && thread.priority.label.toLowerCase() !== "low")}
+            <div class="vk-ticket-badges">
+              {#if thread.status?.label && thread.status.label.toLowerCase() !== "open"}
+                <span class={cn("vk-badge", "status")}>
+                  {thread.status.label}
+                </span>
+              {/if}
+              {#if thread.priority?.label && thread.priority.label.toLowerCase() !== "low"}
+                <span class={cn("vk-badge", "priority")}>
+                  {thread.priority.label}
+                </span>
+              {/if}
+            </div>
+          {/if}
+        </div>
+
+        <!-- Summary (ticket form answers) -->
+        {#if summaryAnswers.length > 0}
+          <div class="vk-section-card">
+            <div class="vk-section-header">
+              <span class="vk-section-header-icon">&#128221;</span>
+              <h2>Summary</h2>
+            </div>
+            <div class="vk-section-body">
+              <div class="vk-summary-list">
+                {#each summaryAnswers as answer (answer.id)}
+                  <div class="vk-summary-item">
+                    <p class="vk-summary-label">{answer.question_label || "Question"}</p>
+                    {#if answer.attachments && answer.attachments.length > 0}
+                      <div class="vk-attachments">
+                        {#each answer.attachments as attachment (attachment.id)}
+                          <a
+                            class="vk-attachment"
+                            href={attachment.url}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                          >
+                            &#128206; <span>{attachment.original_filename}</span>
+                          </a>
+                        {/each}
+                      </div>
+                    {:else if isFileAnswer(answer.answer)}
+                      <p class="vk-summary-value muted">File uploaded</p>
+                    {:else}
+                      <p class="vk-summary-value">{formatAnswerText(answer.answer) || "-"}</p>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            </div>
+          </div>
+        {/if}
+
+        <!-- Description (first reporter message) -->
+        {#if firstReporterMessage}
+          <div class="vk-section-card">
+            <div class="vk-section-header">
+              <span class="vk-section-header-icon">&#128196;</span>
+              <h2>Description</h2>
+            </div>
+            <div class="vk-section-body">
+              <div class="vk-description-content vk-message-html">
+                {@html sanitizeHtml(firstReporterMessage.content)}
+              </div>
+              {#if firstReporterMessage.attachments && firstReporterMessage.attachments.length > 0}
+                <div class="vk-attachments">
+                  {#each firstReporterMessage.attachments as att (att.id)}
+                    <a
+                      href={att.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="vk-attachment"
+                    >
+                      &#128206; <span>{att.original_filename}</span>
+                    </a>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/if}
+
+        <!-- Comments card -->
+        <div class="vk-section-card">
+          <div class="vk-section-header">
+            <span class="vk-section-header-icon">&#128172;</span>
+            <h2>Comments</h2>
+          </div>
+
+          <!-- Compose area -->
+          <div class="vk-compose">
+            <form class="vk-stack" onsubmit={onSubmitReply}>
+              <textarea
+                class="vk-textarea"
+                bind:value={content}
+                placeholder="Write your reply..."
+              ></textarea>
+
+              <div class="vk-compose-row">
+                <!-- File input -->
+                <div class="vk-compose-files">
+                  <label class="vk-browse-btn">
+                    &#128206; Browse files
+                    <input
+                      type="file"
+                      multiple
+                      onchange={onFileChange}
+                    />
+                  </label>
+                  {#each files as file, i}
+                    <span class="vk-file-chip">
+                      &#128206;
+                      <span class="vk-file-chip-name">{file.name}</span>
+                      <button
+                        type="button"
+                        onclick={() => removeFile(i)}
+                        aria-label="Remove {file.name}"
+                      >
+                        &#10005;
+                      </button>
+                    </span>
+                  {/each}
+                </div>
+
+                <!-- Send -->
+                <button
+                  class="vk-button primary"
+                  disabled={isSending}
+                  type="submit"
+                >
+                  {#if isSending}
+                    <span class="vk-spinner"></span>
+                    Sending...
+                  {:else}
+                    Send
+                  {/if}
+                </button>
+              </div>
+            </form>
+          </div>
+
+          <!-- Message list -->
+          {#if sortedMessages.length === 0}
+            <div class="vk-empty-state">
+              <div class="vk-empty-icon">&#128172;</div>
+              <p class="vk-empty-text">
+                No messages yet. Be the first to reply!
+              </p>
+            </div>
+          {:else}
+            <div class="vk-message-list">
+              {#each sortedMessages as message, index (message.id)}
+                {#if index > 0}
+                  <hr class="vk-message-divider" />
+                {/if}
+
+                {#if message.author_type === "system"}
+                  <!-- System message -->
+                  <div class="vk-message">
+                    <div class={cn("vk-avatar", "vk-avatar-system")} aria-hidden="true">
+                      S
+                    </div>
+                    <div class="vk-message-content">
+                      <div class="vk-message-meta">
+                        <span class="vk-author-name system">System</span>
+                        <span class="vk-message-time">{formatDate(message.created_at)}</span>
+                      </div>
+                      <p class="vk-system-text">
+                        {stripHtml(message.content)}
+                      </p>
+                    </div>
+                  </div>
+                {:else}
+                  <!-- Regular message -->
+                  <div class="vk-message">
+                    <div class={cn("vk-avatar", `vk-avatar-${message.author_type}`)} aria-hidden="true">
+                      {(AUTHOR_LABELS[message.author_type] || "?")[0]}
+                    </div>
+                    <div class="vk-message-content">
+                      <div class="vk-message-meta">
+                        <span class="vk-author-name">
+                          {AUTHOR_LABELS[message.author_type] || message.author_type}
+                        </span>
+                        <span class="vk-message-time">{formatDate(message.created_at)}</span>
+                      </div>
+                      <div class={cn("vk-message-bubble", message.author_type === "user" && "support")}>
+                        <div class="vk-message-html">
+                          {@html sanitizeHtml(message.content)}
+                        </div>
+                      </div>
+                      {#if message.attachments && message.attachments.length > 0}
+                        <div class="vk-attachments">
+                          {#each message.attachments as attachment (attachment.id)}
+                            <a
+                              class="vk-attachment"
+                              href={attachment.url}
+                              rel="noopener noreferrer"
+                              target="_blank"
+                            >
+                              &#128206; <span>{attachment.original_filename}</span>
+                            </a>
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                {/if}
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  @import '$lib/vicket.css';
+</style>

package/templates-tailwind/next/src/app/api/vicket/init/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+
+const VICKET_API_URL = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+const VICKET_API_KEY = process.env.VICKET_API_KEY || "";
+
+export async function GET() {
+  if (!VICKET_API_URL || !VICKET_API_KEY) {
+    return NextResponse.json(
+      { error: "Missing VICKET_API_URL or VICKET_API_KEY server environment variables." },
+      { status: 500 },
+    );
+  }
+
+  const upstream = await fetch(`${VICKET_API_URL}/public/support/init`, {
+    method: "GET",
+    headers: { "X-Api-Key": VICKET_API_KEY, "Content-Type": "application/json" },
+  });
+
+  const body = await upstream.arrayBuffer();
+  return new NextResponse(body, {
+    status: upstream.status,
+    headers: { "Content-Type": upstream.headers.get("Content-Type") || "application/json" },
+  });
+}

package/templates-tailwind/next/src/app/api/vicket/messages/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const VICKET_API_URL = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+const VICKET_API_KEY = process.env.VICKET_API_KEY || "";
+
+export async function POST(req: NextRequest) {
+  if (!VICKET_API_URL || !VICKET_API_KEY) {
+    return NextResponse.json(
+      { error: "Missing VICKET_API_URL or VICKET_API_KEY server environment variables." },
+      { status: 500 },
+    );
+  }
+
+  const token = req.nextUrl.searchParams.get("token") || "";
+  const url = `${VICKET_API_URL}/public/support/ticket/messages?token=${encodeURIComponent(token)}`;
+
+  const contentType = req.headers.get("content-type") || "";
+  const headers: HeadersInit = { "X-Api-Key": VICKET_API_KEY };
+  let body: BodyInit;
+
+  if (contentType.includes("multipart/form-data")) {
+    body = await req.blob();
+    headers["Content-Type"] = contentType;
+  } else {
+    body = await req.text();
+    headers["Content-Type"] = "application/json";
+  }
+
+  const upstream = await fetch(url, { method: "POST", headers, body });
+
+  const responseBody = await upstream.arrayBuffer();
+  return new NextResponse(responseBody, {
+    status: upstream.status,
+    headers: { "Content-Type": upstream.headers.get("Content-Type") || "application/json" },
+  });
+}

package/templates-tailwind/next/src/app/api/vicket/thread/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const VICKET_API_URL = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+const VICKET_API_KEY = process.env.VICKET_API_KEY || "";
+
+export async function GET(req: NextRequest) {
+  if (!VICKET_API_URL || !VICKET_API_KEY) {
+    return NextResponse.json(
+      { error: "Missing VICKET_API_URL or VICKET_API_KEY server environment variables." },
+      { status: 500 },
+    );
+  }
+
+  const token = req.nextUrl.searchParams.get("token") || "";
+  const url = `${VICKET_API_URL}/public/support/ticket?token=${encodeURIComponent(token)}`;
+
+  const upstream = await fetch(url, {
+    method: "GET",
+    headers: { "X-Api-Key": VICKET_API_KEY, "Content-Type": "application/json" },
+  });
+
+  const body = await upstream.arrayBuffer();
+  return new NextResponse(body, {
+    status: upstream.status,
+    headers: { "Content-Type": upstream.headers.get("Content-Type") || "application/json" },
+  });
+}

package/templates-tailwind/next/src/app/api/vicket/tickets/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const VICKET_API_URL = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+const VICKET_API_KEY = process.env.VICKET_API_KEY || "";
+
+export async function POST(req: NextRequest) {
+  if (!VICKET_API_URL || !VICKET_API_KEY) {
+    return NextResponse.json(
+      { error: "Missing VICKET_API_URL or VICKET_API_KEY server environment variables." },
+      { status: 500 },
+    );
+  }
+
+  const contentType = req.headers.get("content-type") || "";
+  const headers: HeadersInit = { "X-Api-Key": VICKET_API_KEY };
+  let body: BodyInit;
+
+  if (contentType.includes("multipart/form-data")) {
+    body = await req.blob();
+    headers["Content-Type"] = contentType;
+  } else {
+    body = await req.text();
+    headers["Content-Type"] = "application/json";
+  }
+
+  const upstream = await fetch(`${VICKET_API_URL}/public/support/tickets`, {
+    method: "POST",
+    headers,
+    body,
+  });
+
+  const responseBody = await upstream.arrayBuffer();
+  return new NextResponse(responseBody, {
+    status: upstream.status,
+    headers: { "Content-Type": upstream.headers.get("Content-Type") || "application/json" },
+  });
+}

package/templates-tailwind/next/src/app/support/page.tsx

@@ -0,0 +1,5 @@
+import SupportPage from "@/components/vicket/support-page";
+
+export default function Page() {
+  return <SupportPage />;
+}

package/templates-tailwind/next/src/app/ticket/page.tsx

@@ -0,0 +1,10 @@
+import { Suspense } from "react";
+import TicketPage from "@/components/vicket/ticket-page";
+
+export default function Page() {
+  return (
+    <Suspense>
+      <TicketPage />
+    </Suspense>
+  );
+}