@vicket/create-support 1.1.1 → 1.1.2

package/templates-tailwind/next/src/components/vicket/support-content.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import type { Template, Article, Faq } from "vicket";
+import { sanitizeHtml, stripHtml, cn } from "vicket";
+import TicketDialog from "./ticket-dialog";
+
+/* ── Sub-components ──────────────────────────────── */
+
+function FaqItem({ question, answer }: { question: string; answer: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="rounded-xl border border-slate-200 bg-white/50 transition-colors hover:bg-white/80">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className={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",
+          open && "text-blue-600",
+        )}
+        aria-expanded={open}
+      >
+        {question}
+        <span className={cn("shrink-0 text-slate-500 transition-transform duration-200", open && "rotate-180")}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg>
+        </span>
+      </button>
+      <div className={cn("grid grid-rows-[0fr] transition-[grid-template-rows] duration-250", open && "grid-rows-[1fr]")}>
+        <div className="overflow-hidden">
+          <div className="whitespace-pre-wrap px-4 pb-4 text-sm leading-relaxed text-slate-500">
+            {answer}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Inline SVG icon paths ────────────────────── */
+const svgArticle = <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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>;
+const svgArticleSmall = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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>;
+const svgHelpCircle = <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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>;
+const svgMessageCircle16 = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>;
+const svgMessageCircle22 = <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>;
+const svgSearch = <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>;
+const svgArrowLeft = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>;
+
+/* ── Tailwind classes for dangerouslySetInnerHTML content ── */
+const htmlContentClasses = "[&_p]:mb-2 [&_p:last-child]:mb-0 [&_a]:text-blue-600 [&_a]:underline [&_ul]:my-1 [&_ul]:pl-6 [&_ol]:my-1 [&_ol]:pl-6 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-slate-50 [&_pre]:p-3 [&_pre]:text-xs [&_code]:font-mono [&_code]:text-[0.85em]";
+
+/* ── Main component ──────────────────────────────── */
+
+export default function SupportContent({
+  templates,
+  articles,
+  faqs,
+  websiteName,
+  initialError,
+}: {
+  templates: Template[];
+  articles: Article[];
+  faqs: Faq[];
+  websiteName: string;
+  initialError: string;
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedArticle, setSelectedArticle] = useState<Article | null>(null);
+  const [error, setError] = useState(initialError);
+
+  const filteredArticles = useMemo(() => {
+    if (!searchQuery.trim()) return articles;
+    const q = searchQuery.toLowerCase();
+    return articles.filter(
+      (a) => a.title.toLowerCase().includes(q) || stripHtml(a.content).toLowerCase().includes(q),
+    );
+  }, [articles, searchQuery]);
+
+  const filteredFaqs = useMemo(() => {
+    if (!searchQuery.trim()) return faqs;
+    const q = searchQuery.toLowerCase();
+    return faqs.filter(
+      (f) => f.question.toLowerCase().includes(q) || f.answer.toLowerCase().includes(q),
+    );
+  }, [faqs, searchQuery]);
+
+  const hasContent = articles.length > 0 || faqs.length > 0;
+  const hasResults = filteredArticles.length > 0 || filteredFaqs.length > 0;
+
+  /* ── Article viewer ── */
+  if (selectedArticle) {
+    return (
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
+          <div>
+            <h1 className="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{websiteName}</h1>
+            <p className="mt-1.5 text-slate-500">How can we help you today?</p>
+          </div>
+          {templates.length > 0 && (
+            <button
+              type="button"
+              className="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"
+              onClick={() => setDialogOpen(true)}
+            >
+              {svgMessageCircle16}
+              Contact Support
+            </button>
+          )}
+        </div>
+
+        <div className="pb-16">
+          <button
+            type="button"
+            onClick={() => setSelectedArticle(null)}
+            className="-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"
+          >
+            {svgArrowLeft}
+            Back to articles
+          </button>
+
+          <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
+            <h2 className="m-0 text-xl font-bold tracking-tight text-slate-900 md:text-2xl">{selectedArticle.title}</h2>
+            <div
+              className={cn("mt-5 text-sm leading-relaxed text-slate-500", htmlContentClasses)}
+              dangerouslySetInnerHTML={{ __html: sanitizeHtml(selectedArticle.content) }}
+            />
+          </div>
+        </div>
+
+        <TicketDialog open={dialogOpen} onClose={() => setDialogOpen(false)} templates={templates} />
+      </div>
+    );
+  }
+
+  /* ── Main view ── */
+  return (
+    <div className="mx-auto max-w-5xl px-6">
+      <div className="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 className="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{websiteName}</h1>
+          <p className="mt-1.5 text-slate-500">How can we help you today?</p>
+        </div>
+        {templates.length > 0 && (
+          <div className="flex items-center gap-3">
+            <span className="hidden text-sm text-slate-500 md:block">Can&apos;t find what you&apos;re looking for?</span>
+            <button
+              type="button"
+              className="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"
+              onClick={() => setDialogOpen(true)}
+            >
+              {svgMessageCircle16}
+              Contact Support
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Error alert */}
+      {error && (
+        <div className="pb-4">
+          <div className="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900" role="alert">
+            <span className="mt-0.5 shrink-0">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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 className="flex-1">{error}</span>
+            <button type="button" onClick={() => setError("")} className="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" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Search */}
+      {hasContent && (
+        <div className="pb-8">
+          <div className="relative">
+            <span className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500">{svgSearch}</span>
+            <input
+              type="text"
+              className="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..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Articles + FAQs grid */}
+      {hasResults && (
+        <div className="grid grid-cols-1 gap-10 pb-16 md:grid-cols-2 md:gap-12">
+          {filteredArticles.length > 0 && (
+            <div>
+              <div className="mb-4 flex items-center gap-2">
+                <span className="text-blue-600">{svgArticle}</span>
+                <h2 className="m-0 text-base font-bold tracking-tight text-slate-900">Popular Articles</h2>
+              </div>
+              <div className="space-y-1">
+                {filteredArticles.map((article) => (
+                  <button
+                    key={article.id}
+                    type="button"
+                    className="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"
+                    onClick={() => setSelectedArticle(article)}
+                  >
+                    <div className="flex h-9 w-9 min-w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600">{svgArticleSmall}</div>
+                    <div className="min-w-0 flex-1">
+                      <h3 className="m-0 text-sm font-semibold leading-snug text-slate-900 transition-colors group-hover:text-blue-600">{article.title}</h3>
+                      {article.content && (
+                        <p className="mt-0.5 line-clamp-2 text-xs leading-normal text-slate-500">
+                          {stripHtml(article.content).substring(0, 150)}
+                        </p>
+                      )}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {filteredFaqs.length > 0 && (
+            <div>
+              <div className="mb-4 flex items-center gap-2">
+                <span className="text-blue-600">{svgHelpCircle}</span>
+                <h2 className="m-0 text-base font-bold tracking-tight text-slate-900">Frequently Asked Questions</h2>
+              </div>
+              <div className="space-y-2">
+                {filteredFaqs.map((faq) => (
+                  <FaqItem key={faq.id} question={faq.question} answer={faq.answer} />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* No results */}
+      {searchQuery.trim() && !hasResults && (
+        <div className="pb-16 text-center">
+          <p className="text-sm text-slate-500">No results found for &ldquo;{searchQuery}&rdquo;</p>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!hasContent && !error && (
+        <div className="pb-16 pt-4 text-center">
+          <div className="mx-auto max-w-sm rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-blue-600">{svgMessageCircle22}</div>
+            <p className="m-0 text-sm font-medium text-slate-900">Need help? Our team is here for you.</p>
+            <button
+              type="button"
+              className="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"
+              onClick={() => setDialogOpen(true)}
+            >
+              Contact Support
+            </button>
+          </div>
+        </div>
+      )}
+
+      <TicketDialog open={dialogOpen} onClose={() => setDialogOpen(false)} templates={templates} />
+    </div>
+  );
+}

package/templates-tailwind/next/src/components/vicket/ticket-dialog.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { type FormEvent, useMemo, useState } from "react";
-import type { Template, FormValues } from "@/lib/vicket";
-import { createTicket, initialFormValues, cn } from "@/lib/vicket";
+import type { Template, FormValues } from "vicket";
+import { createTicket, initialFormValues, cn } from "vicket";
 
 /* ── Custom hook ─────────────────────────────────── */
 

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

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { sendReply } from "vicket";
+
+/* ── Props / Emits ──────────────────────────────── */
+const props = defineProps<{
+  token: string;
+}>();
+
+const emit = defineEmits<{
+  replied: [];
+}>();
+
+/* ── Reactive state ─────────────────────────────── */
+const content = ref("");
+const files = ref<File[]>([]);
+const isSending = ref(false);
+const error = ref("");
+const success = ref("");
+
+/* ── Helpers ────────────────────────────────────── */
+const removeFile = (index: number) => {
+  files.value = files.value.filter((_, i) => i !== index);
+};
+
+const onFileChange = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+  const newFiles = Array.from(input.files || []).filter((f) => ALLOWED_TYPES.includes(f.type));
+  files.value = [...files.value, ...newFiles];
+  input.value = "";
+};
+
+const submitReply = async () => {
+  error.value = "";
+  success.value = "";
+  if (!content.value.trim() && files.value.length === 0) {
+    error.value = "Reply content is required.";
+    return;
+  }
+  if (!props.token.trim()) {
+    error.value = "Missing ticket token.";
+    return;
+  }
+  isSending.value = true;
+  try {
+    await sendReply(props.token, content.value.trim(), files.value);
+    content.value = "";
+    files.value = [];
+    success.value = "Reply sent.";
+    emit("replied");
+  } catch (replyError) {
+    error.value = replyError instanceof Error ? replyError.message : "Unexpected error.";
+  } finally {
+    isSending.value = false;
+  }
+};
+</script>
+
+<template>
+  <!-- Error alert -->
+  <div v-if="error" class="px-5 pt-5">
+    <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>
+
+  <!-- Success alert -->
+  <div v-if="success" class="px-5 pt-5">
+    <div
+      class="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">
+        <!-- IconCheck -->
+        <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"
+        class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100"
+        aria-label="Dismiss"
+        @click="success = ''"
+      >
+        <!-- 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>
+
+  <!-- Reply form -->
+  <div class="border-b border-slate-200 p-5">
+    <form class="space-y-3" @submit.prevent="submitReply">
+      <textarea
+        v-model="content"
+        class="min-h-[80px] w-full resize-y rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 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"
+        placeholder="Write your reply..."
+      />
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <div class="flex flex-wrap items-center gap-2">
+          <!-- File upload -->
+          <label class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-500 transition-colors hover:border-slate-300 hover:text-slate-900">
+            <!-- IconPaperclip -->
+            <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"
+              class="hidden"
+              multiple
+              accept="image/jpeg,image/png,image/gif,image/webp"
+              @change="onFileChange"
+            />
+          </label>
+          <!-- File chips -->
+          <span
+            v-for="(file, i) in files"
+            :key="`${file.name}-${i}`"
+            class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs text-slate-500"
+          >
+            <!-- IconPaperclip -->
+            <svg width="11" height="11" 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"
+              class="flex cursor-pointer items-center border-none bg-transparent p-0 text-slate-500 transition-colors hover:text-red-600"
+              :aria-label="`Remove ${file.name}`"
+              @click="removeFile(i)"
+            >
+              <!-- IconX -->
+              <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="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+            </button>
+          </span>
+        </div>
+        <!-- Send button -->
+        <button
+          class="inline-flex items-center gap-2 rounded-lg border-none bg-blue-600 px-5 py-2.5 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"
+          type="submit"
+          :disabled="isSending"
+        >
+          <template v-if="isSending">
+            <!-- IconSpinner -->
+            <svg width="16" height="16" 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...
+          </template>
+          <template v-else>
+            <!-- IconSend -->
+            <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.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
+          </template>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>