@vicket/create-support 1.1.1

package/templates-tailwind/next/src/lib/vicket.ts

@@ -0,0 +1,257 @@
+/* ── Types ─────────────────────────────────────── */
+
+export type TemplateOption = {
+  id: string;
+  label: string;
+  value: string;
+};
+
+export type TemplateQuestion = {
+  id: string;
+  label: string;
+  type: "TEXT" | "TEXTAREA" | "SELECT" | "CHECKBOX" | "DATE" | "FILE";
+  required: boolean;
+  order: number;
+  options?: TemplateOption[];
+};
+
+export type Template = {
+  id: string;
+  name: string;
+  description: string;
+  questions: TemplateQuestion[];
+};
+
+export type Article = {
+  id: string;
+  title: string;
+  slug: string;
+  content: string;
+};
+
+export type Faq = {
+  id: string;
+  question: string;
+  answer: string;
+};
+
+export type SupportInitResponse = {
+  success: boolean;
+  data?: {
+    website?: { name?: string };
+    templates: Template[];
+    articles?: Article[];
+    faqs?: Faq[];
+  };
+  error?: string;
+};
+
+export type FormValues = {
+  email: string;
+  title: string;
+  answers: Record<string, unknown>;
+};
+
+export type Attachment = {
+  id: string;
+  original_filename: string;
+  url: string;
+};
+
+export type Message = {
+  id: string;
+  content: string;
+  author_type: "reporter" | "user" | "system";
+  created_at: string;
+  attachments?: Attachment[];
+};
+
+export type TicketAnswer = {
+  id: string;
+  question_label: string;
+  answer: string;
+  attachments?: Attachment[];
+};
+
+export type TicketThread = {
+  id: string;
+  title: string;
+  status?: { label: string };
+  priority?: { label: string };
+  messages: Message[];
+  answers?: TicketAnswer[];
+};
+
+/* ── Constants ─────────────────────────────────── */
+
+const PROXY_BASE = "/api/vicket";
+
+export const AUTHOR_LABELS: Record<string, string> = {
+  reporter: "You",
+  user: "Support",
+  system: "System",
+};
+
+export const initialFormValues: FormValues = { email: "", title: "", answers: {} };
+
+/* ── Helpers ───────────────────────────────────── */
+
+export function cn(...classes: (string | boolean | undefined | null)[]): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, "");
+}
+
+export function sanitizeHtml(html: string): string {
+  return html
+    .replace(/<script[\s\S]*?<\/script>/gi, "")
+    .replace(/\son\w+="[^"]*"/gi, "")
+    .replace(/\son\w+='[^']*'/gi, "")
+    .replace(/href\s*=\s*"javascript:[^"]*"/gi, 'href="#"')
+    .replace(/href\s*=\s*'javascript:[^']*'/gi, "href='#'");
+}
+
+export function formatDate(iso: string): string {
+  try {
+    return new Intl.DateTimeFormat("en", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(new Date(iso));
+  } catch {
+    return iso;
+  }
+}
+
+export function isFileAnswer(answer: string): boolean {
+  return answer?.includes("__isFile:true") || answer?.includes("map[__isFile");
+}
+
+export function formatAnswerText(value: string): string {
+  if (!value) return "";
+  const trimmed = value.trim();
+  if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+    const rawItems = trimmed.slice(1, -1).trim();
+    return rawItems.length > 0 ? rawItems.split(/\s+/).join(", ") : "";
+  }
+  return value;
+}
+
+/* ── API client ────────────────────────────────── */
+
+export async function fetchInit(): Promise<NonNullable<SupportInitResponse["data"]>> {
+  const response = await fetch(`${PROXY_BASE}/init`, {
+    method: "GET",
+    cache: "no-store",
+    headers: { "Content-Type": "application/json" },
+  });
+  const payload = (await response.json()) as SupportInitResponse;
+  if (!response.ok || !payload?.success || !payload?.data) {
+    throw new Error(payload?.error || "Failed to load support data.");
+  }
+  return payload.data;
+}
+
+export async function createTicket(body: {
+  email: string;
+  title: string;
+  templateId: string;
+  answers: Record<string, unknown>;
+  hasFiles: boolean;
+  fileQuestionIds: string[];
+}): Promise<{ emailLimitReached?: boolean; warning?: string }> {
+  const payload = {
+    email: body.email,
+    title: body.title,
+    templateId: body.templateId,
+    answers: { ...body.answers },
+  };
+
+  let response: Response;
+  if (body.hasFiles) {
+    const formData = new FormData();
+    const normalizedAnswers: Record<string, unknown> = {};
+    for (const [questionId, answer] of Object.entries(payload.answers)) {
+      if (answer instanceof File) {
+        formData.append(`files[${questionId}]`, answer);
+        normalizedAnswers[questionId] = "__isFile:true";
+      } else {
+        normalizedAnswers[questionId] = answer;
+      }
+    }
+    formData.append("data", JSON.stringify({ ...payload, answers: normalizedAnswers }));
+    response = await fetch(`${PROXY_BASE}/tickets`, { method: "POST", body: formData });
+  } else {
+    response = await fetch(`${PROXY_BASE}/tickets`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+  }
+
+  const responsePayload = (await response.json()) as {
+    error?: string;
+    success?: boolean;
+    data?: { email_limit_reached?: boolean; warning?: string };
+  };
+  if (!response.ok || !responsePayload?.success) {
+    throw new Error(responsePayload?.error || "Failed to create ticket.");
+  }
+  return {
+    emailLimitReached: responsePayload.data?.email_limit_reached ?? false,
+    warning: responsePayload.data?.warning,
+  };
+}
+
+export async function fetchThread(token: string): Promise<TicketThread> {
+  const response = await fetch(
+    `${PROXY_BASE}/thread?token=${encodeURIComponent(token)}`,
+    { method: "GET", cache: "no-store", headers: { "Content-Type": "application/json" } },
+  );
+  const payload = (await response.json()) as {
+    success?: boolean;
+    error?: string;
+    error_code?: string;
+    data?: TicketThread;
+  };
+  if (!response.ok || !payload?.success || !payload?.data) {
+    if (payload?.error_code === "ticket-link-expired") {
+      throw new Error("This link has expired. A new secure link has been sent to your email.");
+    }
+    throw new Error(payload?.error || "Failed to load ticket.");
+  }
+  return payload.data;
+}
+
+export async function sendReply(token: string, content: string, files: File[]): Promise<void> {
+  const url = `${PROXY_BASE}/messages?token=${encodeURIComponent(token)}`;
+
+  let response: Response;
+  if (files.length > 0) {
+    const formData = new FormData();
+    formData.append("data", JSON.stringify({ content }));
+    for (const file of files) formData.append("files", file);
+    response = await fetch(url, { method: "POST", body: formData });
+  } else {
+    response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content }),
+    });
+  }
+
+  const payload = (await response.json()) as {
+    success?: boolean;
+    error?: string;
+    error_code?: string;
+  };
+  if (!response.ok || !payload?.success) {
+    if (payload?.error_code === "ticket-link-expired") {
+      throw new Error("This link has expired. A new secure link has been sent to your email.");
+    }
+    throw new Error(payload?.error || "Failed to send reply.");
+  }
+}

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

@@ -0,0 +1,317 @@
+<script setup lang="ts">
+/* ── Reactive state ─────────────────────────────── */
+const templates = ref<Template[]>([]);
+const articles = ref<Article[]>([]);
+const faqs = ref<Faq[]>([]);
+const websiteName = ref("Support");
+const isLoading = ref(true);
+const error = ref("");
+const searchQuery = ref("");
+const dialogOpen = ref(false);
+const selectedArticle = ref<Article | null>(null);
+
+/* FAQ accordion open state */
+const openFaqIds = ref<Set<string>>(new Set());
+
+/* ── Computed ───────────────────────────────────── */
+const filteredArticles = computed(() => {
+  if (!searchQuery.value.trim()) return articles.value;
+  const q = searchQuery.value.toLowerCase();
+  return articles.value.filter(
+    (a) =>
+      a.title.toLowerCase().includes(q) ||
+      stripHtml(a.content).toLowerCase().includes(q),
+  );
+});
+
+const filteredFaqs = computed(() => {
+  if (!searchQuery.value.trim()) return faqs.value;
+  const q = searchQuery.value.toLowerCase();
+  return faqs.value.filter(
+    (f) =>
+      f.question.toLowerCase().includes(q) ||
+      f.answer.toLowerCase().includes(q),
+  );
+});
+
+const hasContent = computed(() => articles.value.length > 0 || faqs.value.length > 0);
+const hasResults = computed(() => filteredArticles.value.length > 0 || filteredFaqs.value.length > 0);
+
+/* ── FAQ accordion ──────────────────────────────── */
+const toggleFaq = (id: string) => {
+  const next = new Set(openFaqIds.value);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  openFaqIds.value = next;
+};
+
+const isFaqOpen = (id: string) => openFaqIds.value.has(id);
+
+/* ── Data loading ───────────────────────────────── */
+onMounted(async () => {
+  isLoading.value = true;
+  error.value = "";
+  try {
+    const data = await fetchInit();
+    templates.value = data.templates || [];
+    articles.value = data.articles || [];
+    faqs.value = data.faqs || [];
+    websiteName.value = data.website?.name || "Support";
+  } catch (loadError) {
+    error.value = loadError instanceof Error ? loadError.message : "Unexpected error.";
+  } finally {
+    isLoading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
+    <!-- Skeleton loading state -->
+    <div v-if="isLoading">
+      <div class="mx-auto flex max-w-5xl flex-col gap-6 px-6 pt-14 md:flex-row md:items-center md:justify-between">
+        <div class="flex-1">
+          <div class="mb-3 h-9 w-48 animate-pulse rounded-lg bg-slate-200" />
+          <div class="h-5 w-64 animate-pulse rounded-md bg-slate-200" />
+        </div>
+        <div class="h-10 w-40 animate-pulse rounded-full bg-slate-200" />
+      </div>
+      <div class="mx-auto mt-8 max-w-5xl px-6">
+        <div class="h-11 w-full animate-pulse rounded-xl bg-slate-200" />
+      </div>
+      <div class="mx-auto mt-8 grid max-w-5xl grid-cols-1 gap-8 px-6 md:grid-cols-2">
+        <div class="space-y-3">
+          <div class="h-5 w-36 animate-pulse rounded bg-slate-200" />
+          <div v-for="i in 3" :key="i" class="h-20 animate-pulse rounded-xl bg-slate-200" />
+        </div>
+        <div class="space-y-3">
+          <div class="h-5 w-52 animate-pulse rounded bg-slate-200" />
+          <div v-for="i in 3" :key="i" class="h-14 animate-pulse rounded-xl bg-slate-200" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Article detail view -->
+    <div v-else-if="selectedArticle" class="mx-auto max-w-5xl px-6">
+      <div class="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 class="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{{ websiteName }}</h1>
+          <p class="mt-1.5 text-slate-500">How can we help you today?</p>
+        </div>
+        <button
+          v-if="templates.length > 0"
+          type="button"
+          class="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 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"
+          @click="dialogOpen = true"
+        >
+          <!-- 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"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+          Contact Support
+        </button>
+      </div>
+
+      <div class="pb-16">
+        <button
+          type="button"
+          class="-ml-2 mb-4 inline-flex cursor-pointer items-center gap-1.5 rounded-lg border-none bg-transparent px-2 py-1 text-sm font-medium text-slate-500 transition-colors hover:bg-white hover:text-slate-900"
+          @click="selectedArticle = null"
+        >
+          <!-- 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 articles
+        </button>
+
+        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
+          <h2 class="m-0 text-xl font-bold tracking-tight text-slate-900 md:text-2xl">{{ selectedArticle.title }}</h2>
+          <div
+            class="vk-message-content mt-5 text-sm leading-relaxed text-slate-500"
+            v-html="sanitizeHtml(selectedArticle.content)"
+          />
+        </div>
+      </div>
+
+      <VicketTicketDialog
+        :open="dialogOpen"
+        :templates="templates"
+        @close="dialogOpen = false"
+      />
+    </div>
+
+    <!-- Main hub view -->
+    <div v-else class="mx-auto max-w-5xl px-6">
+      <div class="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 class="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{{ websiteName }}</h1>
+          <p class="mt-1.5 text-slate-500">How can we help you today?</p>
+        </div>
+        <div v-if="templates.length > 0" class="flex items-center gap-3">
+          <span class="hidden text-sm text-slate-500 md:block">Can't find what you're looking for?</span>
+          <button
+            type="button"
+            class="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 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"
+            @click="dialogOpen = true"
+          >
+            <!-- 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"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+            Contact Support
+          </button>
+        </div>
+      </div>
+
+      <!-- Error alert -->
+      <div v-if="error" class="pb-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>
+
+      <!-- Search bar -->
+      <div v-if="hasContent" class="pb-8">
+        <div class="relative">
+          <span class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500">
+            <!-- IconSearch -->
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
+          </span>
+          <input
+            type="text"
+            class="w-full rounded-xl border border-slate-200 bg-white py-3 pl-11 pr-4 text-sm text-slate-900 shadow-sm transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+            placeholder="Search articles and FAQs..."
+            v-model="searchQuery"
+          />
+        </div>
+      </div>
+
+      <!-- Content grid -->
+      <div v-if="hasResults" class="grid grid-cols-1 gap-10 pb-16 md:grid-cols-2 md:gap-12">
+        <!-- Articles -->
+        <div v-if="filteredArticles.length > 0">
+          <div class="mb-4 flex items-center gap-2">
+            <span class="text-blue-600">
+              <!-- IconArticle 18 -->
+              <svg width="18" height="18" 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-base font-bold tracking-tight text-slate-900">Popular Articles</h2>
+          </div>
+          <div class="space-y-1">
+            <button
+              v-for="article in filteredArticles"
+              :key="article.id"
+              type="button"
+              class="group flex w-full cursor-pointer items-start gap-3 rounded-xl border border-transparent bg-transparent p-3 text-left transition-all duration-150 hover:border-slate-200 hover:bg-white hover:shadow-sm"
+              @click="selectedArticle = article"
+            >
+              <div class="flex h-9 w-9 min-w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600">
+                <!-- IconArticle 16 -->
+                <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>
+              </div>
+              <div class="min-w-0 flex-1">
+                <h3 class="m-0 text-sm font-semibold leading-snug text-slate-900 transition-colors group-hover:text-blue-600">{{ article.title }}</h3>
+                <p v-if="article.content" class="mt-0.5 line-clamp-2 text-xs leading-normal text-slate-500">
+                  {{ stripHtml(article.content).substring(0, 150) }}
+                </p>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <!-- FAQs -->
+        <div v-if="filteredFaqs.length > 0">
+          <div class="mb-4 flex items-center gap-2">
+            <span class="text-blue-600">
+              <!-- IconHelpCircle -->
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" /></svg>
+            </span>
+            <h2 class="m-0 text-base font-bold tracking-tight text-slate-900">Frequently Asked Questions</h2>
+          </div>
+          <div class="space-y-2">
+            <div
+              v-for="faq in filteredFaqs"
+              :key="faq.id"
+              class="rounded-xl border border-slate-200 bg-white/50 transition-colors hover:bg-white/80"
+            >
+              <button
+                type="button"
+                :class="cn(
+                  'flex w-full cursor-pointer items-center justify-between gap-3 border-none bg-transparent px-4 py-3.5 text-left text-sm font-semibold text-slate-900',
+                  isFaqOpen(faq.id) && 'text-blue-600',
+                )"
+                :aria-expanded="isFaqOpen(faq.id)"
+                @click="toggleFaq(faq.id)"
+              >
+                {{ faq.question }}
+                <span :class="cn('shrink-0 text-slate-500 transition-transform duration-200', isFaqOpen(faq.id) && 'rotate-180')">
+                  <!-- IconChevronDown -->
+                  <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="m6 9 6 6 6-6" /></svg>
+                </span>
+              </button>
+              <div :class="cn('grid grid-rows-[0fr] transition-[grid-template-rows] duration-250', isFaqOpen(faq.id) && 'grid-rows-[1fr]')">
+                <div class="overflow-hidden">
+                  <div class="whitespace-pre-wrap px-4 pb-4 text-sm leading-relaxed text-slate-500">
+                    {{ faq.answer }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- No search results -->
+      <div v-if="searchQuery.trim() && !hasResults" class="pb-16 text-center">
+        <p class="text-sm text-slate-500">No results found for &ldquo;{{ searchQuery }}&rdquo;</p>
+      </div>
+
+      <!-- Empty state -->
+      <div v-if="!hasContent && !error" class="pb-16 pt-4 text-center">
+        <div class="mx-auto max-w-sm rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
+          <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-blue-600">
+            <!-- IconMessageCircle 22 -->
+            <svg width="22" height="22" 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 font-medium text-slate-900">Need help? Our team is here for you.</p>
+          <button
+            type="button"
+            class="mt-5 inline-flex items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 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"
+            @click="dialogOpen = true"
+          >
+            Contact Support
+          </button>
+        </div>
+      </div>
+
+      <VicketTicketDialog
+        :open="dialogOpen"
+        :templates="templates"
+        @close="dialogOpen = false"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.vk-message-content p { margin-bottom: 0.5rem; }
+.vk-message-content p:last-child { margin-bottom: 0; }
+.vk-message-content a { color: #2563eb; text-decoration: underline; }
+.vk-message-content ul, .vk-message-content ol { margin: 0.25rem 0; padding-left: 1.5rem; }
+.vk-message-content pre { overflow-x: auto; border-radius: 6px; background: #f8fafc; padding: 0.75rem; font-size: 0.75rem; }
+.vk-message-content code { font-family: monospace; font-size: 0.85em; }
+</style>