@vicket/create-support 1.1.1 → 1.1.2

package/templates-tailwind/next/src/app/support/page.tsx

@@ -1,5 +1,35 @@
-import SupportPage from "@/components/vicket/support-page";
+import { createServerClient } from "vicket/server";
+import type { Template, Article, Faq } from "vicket";
+import SupportContent from "@/components/vicket/support-content";
 
-export default function Page() {
-  return <SupportPage />;
+const vicket = createServerClient();
+
+export default async function SupportPage() {
+  let templates: Template[] = [];
+  let articles: Article[] = [];
+  let faqs: Faq[] = [];
+  let websiteName = "Support";
+  let error = "";
+
+  try {
+    const data = await vicket.fetchInit();
+    templates = data.templates || [];
+    articles = data.articles || [];
+    faqs = data.faqs || [];
+    websiteName = data.website?.name || "Support";
+  } catch (e) {
+    error = e instanceof Error ? e.message : "Failed to load support data.";
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
+      <SupportContent
+        templates={templates}
+        articles={articles}
+        faqs={faqs}
+        websiteName={websiteName}
+        initialError={error}
+      />
+    </div>
+  );
 }

package/templates-tailwind/next/src/app/ticket/page.tsx

@@ -1,10 +1,253 @@
-import { Suspense } from "react";
-import TicketPage from "@/components/vicket/ticket-page";
+import { createServerClient } from "vicket/server";
+import { sanitizeHtml, formatDate, cn, isFileAnswer, formatAnswerText, AUTHOR_LABELS } from "vicket";
+import type { Message } from "vicket";
+import ReplyForm from "@/components/vicket/reply-form";
+
+const vicket = createServerClient();
+
+type Props = {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+};
+
+export default async function TicketPage({ searchParams }: Props) {
+  const { token } = await searchParams;
+  const tokenStr = typeof token === "string" ? token : "";
+
+  let thread = null;
+  let error = "";
+
+  if (!tokenStr.trim()) {
+    error = "Missing ticket token in URL.";
+  } else {
+    try {
+      thread = await vicket.fetchThread(tokenStr);
+    } catch (e) {
+      error = e instanceof Error ? e.message : "Failed to load ticket.";
+    }
+  }
+
+  /* ── Derived data ──────────────────────────────── */
+  const firstReporterMessage = (() => {
+    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(),
+    );
+    return sorted[0].author_type === "reporter" ? sorted[0] : null;
+  })();
+
+  const sortedMessages = (() => {
+    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);
+  })();
+
+  const summaryAnswers = (() => {
+    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;
+    });
+  })();
+
+  /* ── 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]";
 
-export default function Page() {
   return (
-    <Suspense>
-      <TicketPage />
-    </Suspense>
+    <div className="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
+      <div className="mx-auto w-full max-w-3xl px-4 py-8">
+        {/* Back link */}
+        <div className="mb-6">
+          <a href="/support" className="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" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
+            Back to support
+          </a>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div className="mb-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>
+            </div>
+          </div>
+        )}
+
+        {/* Thread content */}
+        {thread && (
+          <div className="space-y-6">
+            {/* Header */}
+            <div>
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <h1 className="m-0 text-xl font-semibold tracking-tight text-slate-900 sm:text-2xl">{thread.title}</h1>
+                {thread.id && (
+                  <span className="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-0.5 text-xs font-semibold font-mono text-slate-500">
+                    #{thread.id.slice(0, 8)}
+                  </span>
+                )}
+              </div>
+              {((thread.status?.label && thread.status.label.toLowerCase() !== "open") || (thread.priority?.label && thread.priority.label.toLowerCase() !== "low")) && (
+                <div className="mt-2.5 flex flex-wrap items-center gap-2">
+                  {thread.status?.label && thread.status.label.toLowerCase() !== "open" && (
+                    <span className="inline-flex items-center rounded-full border border-blue-600/20 bg-blue-50 px-2.5 py-0.5 text-xs font-semibold text-blue-600">
+                      {thread.status.label}
+                    </span>
+                  )}
+                  {thread.priority?.label && thread.priority.label.toLowerCase() !== "low" && (
+                    <span className="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700">
+                      {thread.priority.label}
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Summary */}
+            {summaryAnswers.length > 0 && (
+              <div className="rounded-2xl border border-slate-200 bg-white shadow-sm">
+                <div className="flex items-center gap-2 border-b border-slate-200 px-5 py-3.5">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="text-slate-500"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
+                  <h2 className="m-0 text-sm font-semibold text-slate-900">Summary</h2>
+                </div>
+                <div className="space-y-3 p-5">
+                  {summaryAnswers.map((answer) => (
+                    <div key={answer.id} className="rounded-xl bg-slate-50/70 p-4">
+                      <p className="mb-2.5 text-xs font-medium text-slate-500">{answer.question_label || "Question"}</p>
+                      {answer.attachments && answer.attachments.length > 0 ? (
+                        <div className="flex flex-wrap gap-1.5">
+                          {answer.attachments.map((att) => (
+                            <a key={att.id} href={att.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-500 no-underline transition-colors hover:border-slate-300 hover:text-slate-900">
+                              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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>
+                          ))}
+                        </div>
+                      ) : isFileAnswer(answer.answer) ? (
+                        <p className="text-sm italic text-slate-500">File uploaded</p>
+                      ) : (
+                        <p className="whitespace-pre-wrap break-words rounded-md border border-slate-200/60 bg-white px-3 py-2 text-sm leading-relaxed text-slate-900">
+                          {formatAnswerText(answer.answer) || "-"}
+                        </p>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Description */}
+            {firstReporterMessage && (
+              <div className="rounded-2xl border border-slate-200 bg-white shadow-sm">
+                <div className="flex items-center gap-2 border-b border-slate-200 px-5 py-3.5">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="text-slate-500"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
+                  <h2 className="m-0 text-sm font-semibold text-slate-900">Description</h2>
+                </div>
+                <div className="p-5">
+                  <div
+                    className={cn("text-sm leading-relaxed text-slate-500", htmlContentClasses)}
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(firstReporterMessage.content) }}
+                  />
+                  {firstReporterMessage.attachments && firstReporterMessage.attachments.length > 0 && (
+                    <div className="mt-3 flex flex-wrap gap-1.5">
+                      {firstReporterMessage.attachments.map((att) => (
+                        <a key={att.id} href={att.url} target="_blank" rel="noopener noreferrer" className="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 no-underline transition-colors hover:border-slate-300 hover:text-slate-900">
+                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Comments */}
+            <div className="rounded-2xl border border-slate-200 bg-white shadow-sm">
+              <div className="flex items-center gap-2 border-b border-slate-200 px-5 py-3.5">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="text-slate-500"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+                <h2 className="m-0 text-sm font-semibold text-slate-900">Comments</h2>
+              </div>
+
+              {/* Reply form (only client component) */}
+              <ReplyForm token={tokenStr} />
+
+              {/* Messages */}
+              {sortedMessages.length === 0 ? (
+                <div className="px-5 py-12 text-center">
+                  <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-slate-50 text-slate-500">
+                    <svg width="20" height="20" 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>
+                  </div>
+                  <p className="m-0 text-sm text-slate-500">No messages yet. Be the first to reply!</p>
+                </div>
+              ) : (
+                <div className="divide-y divide-slate-200">
+                  {sortedMessages.map((message: Message) => {
+                    /* System message */
+                    if (message.author_type === "system") {
+                      return (
+                        <div key={message.id} className="flex gap-3 px-5 py-3.5">
+                          <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-slate-400/20 text-[10px] font-bold leading-none text-slate-400" aria-hidden="true">
+                            S
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <div className="flex flex-wrap items-baseline gap-2">
+                              <span className="text-xs font-medium text-slate-500">System</span>
+                              <span className="text-xs text-slate-500/50">{formatDate(message.created_at)}</span>
+                            </div>
+                            <p className="mt-1 text-xs italic text-slate-500">{message.content.replace(/<[^>]*>/g, "")}</p>
+                          </div>
+                        </div>
+                      );
+                    }
+
+                    /* User / Reporter message */
+                    const avatarColors =
+                      message.author_type === "reporter"
+                        ? "bg-blue-600/15 text-blue-600"
+                        : "bg-emerald-500/15 text-emerald-500";
+
+                    return (
+                      <div key={message.id} className="flex gap-3 px-5 py-3.5">
+                        <div className={cn("mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-bold leading-none", avatarColors)} aria-hidden="true">
+                          {(AUTHOR_LABELS[message.author_type] || "?")[0]}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="flex flex-wrap items-baseline gap-2">
+                            <span className="text-sm font-medium text-slate-900">{AUTHOR_LABELS[message.author_type] || message.author_type}</span>
+                            <span className="text-xs text-slate-500/50">{formatDate(message.created_at)}</span>
+                          </div>
+                          <div
+                            className={cn(
+                              "mt-1.5 break-words rounded-xl px-4 py-3 text-sm leading-relaxed",
+                              htmlContentClasses,
+                              message.author_type === "user" ? "border border-blue-600/10 bg-blue-50 text-slate-800" : "border border-slate-200 bg-slate-50 text-slate-800",
+                            )}
+                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(message.content) }}
+                          />
+                          {message.attachments && message.attachments.length > 0 && (
+                            <div className="mt-2 flex flex-wrap gap-1.5">
+                              {message.attachments.map((att) => (
+                                <a key={att.id} className="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-500 no-underline transition-all duration-150 hover:border-slate-300 hover:text-slate-900" href={att.url} rel="noopener noreferrer" target="_blank">
+                                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
   );
 }

package/templates-tailwind/next/src/components/vicket/reply-form.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { type FormEvent, useState } from "react";
+import { useRouter } from "next/navigation";
+import { sendReply, cn } from "vicket";
+
+export default function ReplyForm({ token }: { token: string }) {
+  const router = useRouter();
+  const [content, setContent] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError("");
+    setSuccess("");
+    if (!content.trim() && files.length === 0) { setError("Reply content is required."); return; }
+    setIsSending(true);
+    try {
+      await sendReply(token, content.trim(), files);
+      setContent("");
+      setFiles([]);
+      setSuccess("Reply sent.");
+      router.refresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Unexpected error.");
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <div className="border-b border-slate-200 p-5">
+      {/* Error alert */}
+      {error && (
+        <div className="mb-3 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>
+      )}
+      {/* Success alert */}
+      {success && (
+        <div className="mb-3 flex items-start gap-3 rounded-xl border border-green-200 bg-green-50 p-4 text-sm text-green-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="M20 6 9 17l-5-5" /></svg>
+          </span>
+          <span className="flex-1">{success}</span>
+          <button type="button" onClick={() => setSuccess("")} 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>
+      )}
+
+      <form className="space-y-3" onSubmit={onSubmit}>
+        <textarea
+          className="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"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="Write your reply..."
+        />
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <label className="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">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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" className="hidden" multiple accept="image/jpeg,image/png,image/gif,image/webp"
+                onChange={(e) => {
+                  const ALLOWED = ["image/png","image/jpeg","image/gif","image/webp"];
+                  const newFiles = Array.from(e.target.files || []).filter((f) => ALLOWED.includes(f.type));
+                  setFiles((prev) => [...prev, ...newFiles]);
+                  e.target.value = "";
+                }}
+              />
+            </label>
+            {files.map((file, i) => (
+              <span key={`${file.name}-${i}`} className="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">
+                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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 className="max-w-[120px] truncate">{file.name}</span>
+                <button type="button" onClick={() => removeFile(i)} className="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}`}>
+                  <svg width="12" height="12" 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>
+              </span>
+            ))}
+          </div>
+          <button className="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" disabled={isSending} type="submit">
+            {isSending ? (
+              <>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
+                Sending...
+              </>
+            ) : (
+              <>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="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
+              </>
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}