@vicket/create-support 1.1.1 → 1.1.2

package/templates/sveltekit/src/routes/api/vicket/[...path]/+server.ts

@@ -1,77 +1,3 @@
-import { VICKET_API_URL, VICKET_API_KEY } from '$env/static/private';
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
+import { createVicketProxy } from "vicket/sveltekit";
 
-const baseUrl = (VICKET_API_URL || '').replace(/\/+$/, '');
-
-export const GET: RequestHandler = async ({ params, url }) => {
-  if (!baseUrl || !VICKET_API_KEY) {
-    return json({ success: false, error: 'Server misconfigured: missing VICKET_API_URL or VICKET_API_KEY.' }, { status: 500 });
-  }
-
-  const path = params.path || '';
-  const query = url.searchParams.toString();
-  const target = `${baseUrl}/public/support/${path}${query ? `?${query}` : ''}`;
-
-  const response = await fetch(target, {
-    method: 'GET',
-    headers: {
-      'X-Api-Key': VICKET_API_KEY,
-      'Content-Type': 'application/json',
-    },
-  });
-
-  const body = await response.text();
-
-  return new Response(body, {
-    status: response.status,
-    headers: {
-      'Content-Type': response.headers.get('Content-Type') || 'application/json',
-    },
-  });
-};
-
-export const POST: RequestHandler = async ({ params, url, request }) => {
-  if (!baseUrl || !VICKET_API_KEY) {
-    return json({ success: false, error: 'Server misconfigured: missing VICKET_API_URL or VICKET_API_KEY.' }, { status: 500 });
-  }
-
-  const path = params.path || '';
-  const query = url.searchParams.toString();
-  const target = `${baseUrl}/public/support/${path}${query ? `?${query}` : ''}`;
-
-  const contentType = request.headers.get('Content-Type') || '';
-  const isFormData = contentType.includes('multipart/form-data');
-
-  let response: Response;
-
-  if (isFormData) {
-    const formData = await request.formData();
-    response = await fetch(target, {
-      method: 'POST',
-      headers: {
-        'X-Api-Key': VICKET_API_KEY,
-      },
-      body: formData,
-    });
-  } else {
-    const body = await request.text();
-    response = await fetch(target, {
-      method: 'POST',
-      headers: {
-        'X-Api-Key': VICKET_API_KEY,
-        'Content-Type': 'application/json',
-      },
-      body,
-    });
-  }
-
-  const responseBody = await response.text();
-
-  return new Response(responseBody, {
-    status: response.status,
-    headers: {
-      'Content-Type': response.headers.get('Content-Type') || 'application/json',
-    },
-  });
-};
+export const { GET, POST } = createVicketProxy();

package/templates/sveltekit/src/routes/support/+page.server.ts

@@ -0,0 +1,13 @@
+import { VICKET_API_URL, VICKET_API_KEY } from '$env/static/private';
+import { createServerClient } from 'vicket/server';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+  try {
+    const vicket = createServerClient({ apiUrl: VICKET_API_URL, apiKey: VICKET_API_KEY });
+    const initData = await vicket.fetchInit();
+    return { initData, initError: '' };
+  } catch (e) {
+    return { initData: null, initError: e instanceof Error ? e.message : 'Failed to load support data.' };
+  }
+};

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

@@ -1,316 +1,7 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import type { Article, Faq, Template } from "$lib/vicket/types";
-  import { cn, stripHtml, sanitizeHtml } from "$lib/vicket/utils";
-  import { fetchSupportInit } from "$lib/vicket/api";
-  import TicketDialog from "$lib/vicket/TicketDialog.svelte";
+  import SupportContent from "$lib/vicket/SupportContent.svelte";
 
-  /* ---------------------------------------------- */
-  /*  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 searchQuery = $state("");
-  let dialogOpen = $state(false);
-  let selectedArticle = $state<Article | null>(null);
-
-  /* FAQ open state tracking */
-  let openFaqIds = $state<Set<string>>(new Set());
-
-  /* ---------------------------------------------- */
-  /*  Derived                                        */
-  /* ---------------------------------------------- */
-  let filteredArticles = $derived.by(() => {
-    if (!searchQuery.trim()) return articles;
-    const q = searchQuery.toLowerCase();
-    return articles.filter(
-      (a) => a.title.toLowerCase().includes(q) || stripHtml(a.content).toLowerCase().includes(q),
-    );
-  });
-
-  let filteredFaqs = $derived.by(() => {
-    if (!searchQuery.trim()) return faqs;
-    const q = searchQuery.toLowerCase();
-    return faqs.filter(
-      (f) => f.question.toLowerCase().includes(q) || f.answer.toLowerCase().includes(q),
-    );
-  });
-
-  let hasContent = $derived(articles.length > 0 || faqs.length > 0);
-  let hasResults = $derived(filteredArticles.length > 0 || filteredFaqs.length > 0);
-
-  /* ---------------------------------------------- */
-  /*  Functions                                      */
-  /* ---------------------------------------------- */
-  function toggleFaq(id: string) {
-    const next = new Set(openFaqIds);
-    if (next.has(id)) {
-      next.delete(id);
-    } else {
-      next.add(id);
-    }
-    openFaqIds = next;
-  }
-
-  onMount(() => {
-    const load = async () => {
-      isLoading = true;
-      error = "";
-      try {
-        const data = await fetchSupportInit();
-        templates = data.templates || [];
-        articles = data.articles || [];
-        faqs = data.faqs || [];
-        websiteName = data.website?.name || "Support";
-      } catch (loadError) {
-        error = loadError instanceof Error ? loadError.message : "Unexpected error.";
-      } finally {
-        isLoading = false;
-      }
-    };
-
-    void load();
-  });
+  let { data } = $props();
 </script>
 
-<!-- --------------------------------------- -->
-<!--  Loading skeleton                       -->
-<!-- --------------------------------------- -->
-{#if isLoading}
-  <div class="vk-shell">
-    <div class="vk-page vk-animate-in">
-      <div class="vk-hero-row">
-        <div>
-          <div class="vk-skeleton" aria-hidden="true">
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          </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>
-        <div class="vk-skeleton" aria-hidden="true">
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        </div>
-      </div>
-      <div class="vk-search-wrap">
-        <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
-      </div>
-      <div class="vk-content-grid">
-        <div>
-          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
-          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
-          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
-        </div>
-        <div>
-          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
-          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
-          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-<!-- --------------------------------------- -->
-<!--  Article viewer                         -->
-<!-- --------------------------------------- -->
-{:else if selectedArticle}
-  <div class="vk-shell">
-    <div class="vk-page vk-animate-in">
-      <!-- Hero stays visible -->
-      <div class="vk-hero-row">
-        <div>
-          <h1 class="vk-hero-title">{websiteName}</h1>
-          <p class="vk-hero-subtitle">How can we help you today?</p>
-        </div>
-        {#if templates.length > 0}
-          <button
-            type="button"
-            class="vk-button primary pill"
-            onclick={() => (dialogOpen = true)}
-          >
-            &#128172; Contact Support
-          </button>
-        {/if}
-      </div>
-
-      <!-- Article content -->
-      <div class="vk-article-viewer">
-        <button
-          type="button"
-          onclick={() => (selectedArticle = null)}
-          class="vk-back-button"
-        >
-          &#8592; Back to articles
-        </button>
-
-        <div class="vk-article-viewer-card">
-          <h2 class="vk-article-viewer-title">{selectedArticle.title}</h2>
-          <div class="vk-article-viewer-content vk-message-html">
-            {@html sanitizeHtml(selectedArticle.content)}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Ticket dialog (also accessible from article view) -->
-    <TicketDialog open={dialogOpen} onclose={() => (dialogOpen = false)} templates={templates} />
-  </div>
-
-<!-- --------------------------------------- -->
-<!--  Home view                              -->
-<!-- --------------------------------------- -->
-{:else}
-  <div class="vk-shell">
-    <div class="vk-page vk-animate-in">
-      <!-- Row 1 - Hero -->
-      <div class="vk-hero-row">
-        <div>
-          <h1 class="vk-hero-title">{websiteName}</h1>
-          <p class="vk-hero-subtitle">How can we help you today?</p>
-        </div>
-        {#if templates.length > 0}
-          <div class="vk-hero-cta">
-            <span class="vk-hero-cta-hint">
-              Can't find what you're looking for?
-            </span>
-            <button
-              type="button"
-              class="vk-button primary pill"
-              onclick={() => (dialogOpen = true)}
-            >
-              &#128172; Contact Support
-            </button>
-          </div>
-        {/if}
-      </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}
-
-      <!-- Row 2 - Search bar -->
-      {#if hasContent}
-        <div class="vk-search-wrap">
-          <span class="vk-search-icon">&#128269;</span>
-          <input
-            type="text"
-            class="vk-search-input"
-            placeholder="Search articles and FAQs..."
-            bind:value={searchQuery}
-          />
-        </div>
-      {/if}
-
-      <!-- Row 3 - Split content -->
-      {#if hasResults}
-        <div class="vk-content-grid">
-          <!-- Left: Articles -->
-          {#if filteredArticles.length > 0}
-            <div>
-              <div class="vk-section-title-row">
-                <span class="vk-section-title-icon">&#128196;</span>
-                <h2 class="vk-section-title">Popular Articles</h2>
-              </div>
-              <div class="vk-article-list">
-                {#each filteredArticles as article (article.id)}
-                  <button
-                    type="button"
-                    class="vk-article-card"
-                    onclick={() => (selectedArticle = article)}
-                  >
-                    <div class="vk-article-icon" aria-hidden="true">
-                      &#128196;
-                    </div>
-                    <div>
-                      <h3 class="vk-article-title">{article.title}</h3>
-                      {#if article.content}
-                        <p class="vk-article-preview">
-                          {stripHtml(article.content).substring(0, 150)}
-                        </p>
-                      {/if}
-                    </div>
-                  </button>
-                {/each}
-              </div>
-            </div>
-          {/if}
-
-          <!-- Right: FAQs -->
-          {#if filteredFaqs.length > 0}
-            <div>
-              <div class="vk-section-title-row">
-                <span class="vk-section-title-icon">&#10068;</span>
-                <h2 class="vk-section-title">Frequently Asked Questions</h2>
-              </div>
-              <div class="vk-faq-list">
-                {#each filteredFaqs as faq (faq.id)}
-                  <div class="vk-faq-item">
-                    <button
-                      type="button"
-                      onclick={() => toggleFaq(faq.id)}
-                      class="vk-faq-question"
-                      aria-expanded={openFaqIds.has(faq.id)}
-                    >
-                      {faq.question}
-                      <span class={cn("vk-faq-chevron", openFaqIds.has(faq.id) && "open")}>&#9660;</span>
-                    </button>
-                    <div class={cn("vk-faq-body", openFaqIds.has(faq.id) && "open")}>
-                      <div>
-                        <div class="vk-faq-answer">{faq.answer}</div>
-                      </div>
-                    </div>
-                  </div>
-                {/each}
-              </div>
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-      <!-- No search results -->
-      {#if searchQuery.trim() && !hasResults}
-        <div class="vk-no-results">
-          No results found for &ldquo;{searchQuery}&rdquo;
-        </div>
-      {/if}
-
-      <!-- Empty state - no articles and no FAQs at all -->
-      {#if !hasContent && !error}
-        <div class="vk-cta-card">
-          <div class="vk-cta-icon">&#128172;</div>
-          <p class="vk-cta-text">Need help? Our team is here for you.</p>
-          <button
-            type="button"
-            class="vk-button primary pill"
-            onclick={() => (dialogOpen = true)}
-          >
-            Contact Support
-          </button>
-        </div>
-      {/if}
-    </div>
-
-    <!-- Ticket dialog -->
-    <TicketDialog open={dialogOpen} onclose={() => (dialogOpen = false)} templates={templates} />
-  </div>
-{/if}
-
-<style>
-  @import '$lib/vicket.css';
-</style>
+<SupportContent initData={data.initData} initError={data.initError} />

package/templates/sveltekit/src/routes/ticket/+page.server.ts

@@ -0,0 +1,19 @@
+import { VICKET_API_URL, VICKET_API_KEY } from '$env/static/private';
+import { createServerClient } from 'vicket/server';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+  const token = url.searchParams.get('token') || '';
+
+  if (!token.trim()) {
+    return { thread: null, fetchError: 'Missing ticket token in URL.', token };
+  }
+
+  try {
+    const vicket = createServerClient({ apiUrl: VICKET_API_URL, apiKey: VICKET_API_KEY });
+    const thread = await vicket.fetchThread(token);
+    return { thread, fetchError: '', token };
+  } catch (e) {
+    return { thread: null, fetchError: e instanceof Error ? e.message : 'Failed to load ticket.', token };
+  }
+};

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

@@ -1,117 +1,36 @@
 <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";
+  import { cn, sanitizeHtml, stripHtml, formatDate, isFileAnswer, formatAnswerText, AUTHOR_LABELS, type TicketThread, type Message, type TicketAnswer } from "vicket";
+  import ReplyForm from "$lib/vicket/ReplyForm.svelte";
 
-  /* ---------------------------------------------- */
-  /*  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("");
+  let { data } = $props();
 
-  /* ---------------------------------------------- */
-  /*  Derived                                        */
-  /* ---------------------------------------------- */
-  let token = $derived(page.url.searchParams.get("token") || "");
-  let hasToken = $derived(token.trim().length > 0);
+  let thread = $derived<TicketThread | null>(data.thread || null);
+  let error = $state(data.fetchError || "");
+  let token = $derived(data.token);
 
   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(),
+      (a: Message, b: Message) => 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);
+      .sort((a: Message, b: Message) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+      .filter((m: Message) => !firstReporterMessage || m.id !== firstReporterMessage.id);
   });
 
   let summaryAnswers = $derived.by(() => {
     if (!thread?.answers) return [];
-    return thread.answers.filter((answer) => {
+    return thread.answers.filter((answer: TicketAnswer) => {
       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">
@@ -138,54 +57,9 @@
         </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}
+    {#if thread}
       <div class="vk-stack">
         <!-- Header -->
         <div>
@@ -286,57 +160,8 @@
             <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>
+          <!-- Interactive reply form -->
+          <ReplyForm {token} />
 
           <!-- Message list -->
           {#if sortedMessages.length === 0}

package/templates-tailwind/next/src/app/api/vicket/[...path]/route.ts

@@ -0,0 +1,6 @@
+import { createVicketProxy } from "vicket/next";
+
+const proxy = createVicketProxy();
+
+export const GET = proxy;
+export const POST = proxy;