@vicket/create-support 1.1.1 → 1.1.2

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

@@ -1,465 +0,0 @@
-<script lang="ts">
-  import { page } from "$app/state";
-  import type { TicketThread, Message } from "$lib/vicket";
-  import { fetchThread, sendReply, sanitizeHtml, stripHtml, formatDate, cn, isFileAnswer, formatAnswerText, AUTHOR_LABELS } from "$lib/vicket";
-
-  /* ---------------------------------------------- */
-  /*  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 fetchThread(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;
-    }
-  }
-
-  /* ---------------------------------------------- */
-  /*  Load on mount                                  */
-  /* ---------------------------------------------- */
-  $effect(() => {
-    void loadThread();
-  });
-</script>
-
-<div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
-  <div class="mx-auto max-w-4xl px-6 py-16">
-    <!-- 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">
-        <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>
-
-    <!-- Alerts -->
-    {#if error}
-      <div class="mb-6 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-6 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}
-
-    <!-- Loading skeleton -->
-    {#if isLoading}
-      <div class="space-y-6">
-        <!-- Header skeleton -->
-        <div>
-          <div class="h-8 w-80 animate-pulse rounded-lg bg-slate-200" aria-hidden="true"></div>
-          <div class="mt-3 flex gap-2">
-            <div class="h-6 w-16 animate-pulse rounded-full bg-slate-200" aria-hidden="true"></div>
-            <div class="h-6 w-20 animate-pulse rounded-full bg-slate-200" aria-hidden="true"></div>
-          </div>
-        </div>
-        <!-- Messages skeleton -->
-        <div class="rounded-2xl border border-slate-200 bg-white shadow-sm">
-          <div class="border-b border-slate-100 px-5 py-3">
-            <div class="h-5 w-24 animate-pulse rounded bg-slate-200" aria-hidden="true"></div>
-          </div>
-          {#each [1, 2, 3] as i (i)}
-            <div class="flex gap-3 border-b border-slate-50 px-5 py-4 last:border-b-0">
-              <div class="h-8 w-8 shrink-0 animate-pulse rounded-full bg-slate-200" aria-hidden="true"></div>
-              <div class="flex-1 space-y-2">
-                <div class="h-4 w-32 animate-pulse rounded bg-slate-200" aria-hidden="true"></div>
-                <div class="h-4 w-full animate-pulse rounded bg-slate-200" aria-hidden="true"></div>
-              </div>
-            </div>
-          {/each}
-        </div>
-      </div>
-    {/if}
-
-    <!-- Thread -->
-    {#if !isLoading && thread}
-      <div class="space-y-6">
-        <!-- Header -->
-        <div>
-          <div class="flex items-start gap-3">
-            <h1 class="m-0 flex-1 text-xl font-bold text-slate-900 md:text-2xl">{thread.title}</h1>
-            {#if thread.id}
-              <span class="shrink-0 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500">
-                #{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="mt-3 flex flex-wrap gap-2">
-              {#if thread.status?.label && thread.status.label.toLowerCase() !== "open"}
-                <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">
-                  {thread.status.label}
-                </span>
-              {/if}
-              {#if thread.priority?.label && thread.priority.label.toLowerCase() !== "low"}
-                <span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
-                  {thread.priority.label}
-                </span>
-              {/if}
-            </div>
-          {/if}
-        </div>
-
-        <!-- Summary (ticket form answers) -->
-        {#if summaryAnswers.length > 0}
-          <div class="rounded-2xl border border-slate-200 bg-white shadow-sm">
-            <div class="flex items-center gap-2 border-b border-slate-100 px-5 py-3">
-              <span class="text-slate-400">
-                <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 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>
-              </span>
-              <h2 class="m-0 text-sm font-semibold text-slate-900">Summary</h2>
-            </div>
-            <div class="divide-y divide-slate-50 px-5">
-              {#each summaryAnswers as answer (answer.id)}
-                <div class="py-3">
-                  <p class="m-0 text-xs font-semibold uppercase tracking-wider text-slate-400">{answer.question_label || "Question"}</p>
-                  {#if answer.attachments && answer.attachments.length > 0}
-                    <div class="mt-1.5 flex flex-wrap gap-1.5">
-                      {#each answer.attachments as attachment (attachment.id)}
-                        <a
-                          class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-600 no-underline transition-colors hover:bg-slate-100"
-                          href={attachment.url}
-                          rel="noopener noreferrer"
-                          target="_blank"
-                        >
-                          <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>
-                          {attachment.original_filename}
-                        </a>
-                      {/each}
-                    </div>
-                  {:else if isFileAnswer(answer.answer)}
-                    <p class="m-0 mt-1 text-sm italic text-slate-400">File uploaded</p>
-                  {:else}
-                    <p class="m-0 mt-1 text-sm text-slate-700">{formatAnswerText(answer.answer) || "-"}</p>
-                  {/if}
-                </div>
-              {/each}
-            </div>
-          </div>
-        {/if}
-
-        <!-- Description (first reporter message) -->
-        {#if firstReporterMessage}
-          <div class="rounded-2xl border border-slate-200 bg-white shadow-sm">
-            <div class="flex items-center gap-2 border-b border-slate-100 px-5 py-3">
-              <span class="text-slate-400">
-                <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 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>
-              </span>
-              <h2 class="m-0 text-sm font-semibold text-slate-900">Description</h2>
-            </div>
-            <div class="px-5 py-4">
-              <div class="vk-message-content text-sm leading-relaxed text-slate-700">
-                {@html sanitizeHtml(firstReporterMessage.content)}
-              </div>
-              {#if firstReporterMessage.attachments && firstReporterMessage.attachments.length > 0}
-                <div class="mt-3 flex flex-wrap gap-1.5">
-                  {#each firstReporterMessage.attachments as att (att.id)}
-                    <a
-                      href={att.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-600 no-underline transition-colors hover:bg-slate-100"
-                    >
-                      <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>
-                  {/each}
-                </div>
-              {/if}
-            </div>
-          </div>
-        {/if}
-
-        <!-- Comments card -->
-        <div class="rounded-2xl border border-slate-200 bg-white shadow-sm">
-          <div class="flex items-center gap-2 border-b border-slate-100 px-5 py-3">
-            <span class="text-slate-400">
-              <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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
-            </span>
-            <h2 class="m-0 text-sm font-semibold text-slate-900">Comments</h2>
-          </div>
-
-          <!-- 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>
-
-          <!-- Message list -->
-          {#if sortedMessages.length === 0}
-            <div class="px-5 py-10 text-center">
-              <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 text-slate-400">
-                <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>
-          {:else}
-            <div class="divide-y divide-slate-50">
-              {#each sortedMessages as message (message.id)}
-                {#if message.author_type === "system"}
-                  <!-- System message -->
-                  <div class="flex gap-3 px-5 py-4">
-                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-500" aria-hidden="true">
-                      S
-                    </div>
-                    <div class="min-w-0 flex-1">
-                      <div class="flex items-center gap-2">
-                        <span class="text-xs font-semibold italic text-slate-400">System</span>
-                        <span class="text-xs text-slate-400">{formatDate(message.created_at)}</span>
-                      </div>
-                      <p class="m-0 mt-1 text-sm italic text-slate-500">
-                        {stripHtml(message.content)}
-                      </p>
-                    </div>
-                  </div>
-                {:else}
-                  <!-- Regular message -->
-                  <div class="flex gap-3 px-5 py-4">
-                    <div class={cn(
-                      "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold",
-                      message.author_type === "reporter" ? "bg-blue-100 text-blue-700" : "bg-green-100 text-green-700"
-                    )} aria-hidden="true">
-                      {(AUTHOR_LABELS[message.author_type] || "?")[0]}
-                    </div>
-                    <div class="min-w-0 flex-1">
-                      <div class="flex items-center gap-2">
-                        <span class="text-xs font-semibold text-slate-900">{AUTHOR_LABELS[message.author_type] || message.author_type}</span>
-                        <span class="text-xs text-slate-400">{formatDate(message.created_at)}</span>
-                      </div>
-                      <div class={cn(
-                        "mt-1.5 rounded-xl px-4 py-3 text-sm leading-relaxed",
-                        message.author_type === "user" ? "bg-green-50 text-slate-800" : "bg-slate-50 text-slate-800"
-                      )}>
-                        <div class="vk-message-content">
-                          {@html sanitizeHtml(message.content)}
-                        </div>
-                      </div>
-                      {#if message.attachments && message.attachments.length > 0}
-                        <div class="mt-2 flex flex-wrap gap-1.5">
-                          {#each message.attachments as attachment (attachment.id)}
-                            <a
-                              class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-600 no-underline transition-colors hover:bg-slate-100"
-                              href={attachment.url}
-                              rel="noopener noreferrer"
-                              target="_blank"
-                            >
-                              <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>
-                              {attachment.original_filename}
-                            </a>
-                          {/each}
-                        </div>
-                      {/if}
-                    </div>
-                  </div>
-                {/if}
-              {/each}
-            </div>
-          {/if}
-        </div>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  :global(.vk-message-content h1,
-  .vk-message-content h2,
-  .vk-message-content h3,
-  .vk-message-content h4,
-  .vk-message-content h5,
-  .vk-message-content h6) {
-    margin: 1em 0 0.5em;
-    line-height: 1.4;
-  }
-  :global(.vk-message-content p) {
-    margin: 0.5em 0;
-  }
-  :global(.vk-message-content ul,
-  .vk-message-content ol) {
-    margin: 0.5em 0;
-    padding-left: 1.5em;
-  }
-  :global(.vk-message-content a) {
-    color: #2563eb;
-    text-decoration: underline;
-  }
-  :global(.vk-message-content img) {
-    max-width: 100%;
-    border-radius: 0.5rem;
-  }
-  :global(.vk-message-content pre) {
-    background: #f1f5f9;
-    padding: 0.75em 1em;
-    border-radius: 0.5rem;
-    overflow-x: auto;
-    font-size: 0.85em;
-  }
-  :global(.vk-message-content code) {
-    background: #f1f5f9;
-    padding: 0.15em 0.35em;
-    border-radius: 0.25rem;
-    font-size: 0.9em;
-  }
-  :global(.vk-message-content pre code) {
-    background: none;
-    padding: 0;
-  }
-  :global(.vk-message-content blockquote) {
-    border-left: 3px solid #cbd5e1;
-    margin: 0.5em 0;
-    padding-left: 1em;
-    color: #64748b;
-  }
-</style>