@vicket/create-support 1.1.1 → 1.1.2

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

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { cn, 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={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}
+
+<!-- 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>

package/templates/sveltekit/src/lib/vicket/SupportContent.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+  import { cn, stripHtml, sanitizeHtml, type Template, type Article, type Faq } from "vicket";
+  import TicketDialog from "./TicketDialog.svelte";
+
+  let {
+    initData = null,
+    initError = '',
+  }: {
+    initData: { website?: { name?: string }; templates: Template[]; articles?: Article[]; faqs?: Faq[] } | null;
+    initError: string;
+  } = $props();
+
+  /* ---------------------------------------------- */
+  /*  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);
+
+  /* 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;
+  }
+</script>
+
+<!-- --------------------------------------- -->
+<!--  Article viewer                         -->
+<!-- --------------------------------------- -->
+{#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>