@vicket/create-support 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vicket/create-support",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "bin": {
     "create-support": "./bin/create-vicket-support.js"
   },

package/templates/next/src/app/api/vicket/[...path]/route.ts

@@ -1,59 +1,6 @@
-import { NextRequest, NextResponse } from "next/server";
+import { createVicketProxy } from "vicket/next";
 
-const VICKET_API_URL = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
-const VICKET_API_KEY = process.env.VICKET_API_KEY || "";
-
-async function proxy(
-  req: NextRequest,
-  { params }: { params: Promise<{ path: string[] }> },
-) {
-  if (!VICKET_API_URL || !VICKET_API_KEY) {
-    return NextResponse.json(
-      { error: "Missing VICKET_API_URL or VICKET_API_KEY server environment variables." },
-      { status: 500 },
-    );
-  }
-
-  const { path } = await params;
-  const subpath = path.join("/");
-  const url = new URL(`${VICKET_API_URL}/public/support/${subpath}`);
-
-  // Forward query params
-  req.nextUrl.searchParams.forEach((value, key) => {
-    url.searchParams.set(key, value);
-  });
-
-  const headers: HeadersInit = { "X-Api-Key": VICKET_API_KEY };
-  const contentType = req.headers.get("content-type") || "";
-
-  let body: BodyInit | null = null;
-
-  if (req.method !== "GET" && req.method !== "HEAD") {
-    if (contentType.includes("multipart/form-data")) {
-      // Stream FormData as-is; let fetch set the boundary
-      body = await req.blob();
-      headers["Content-Type"] = contentType;
-    } else {
-      body = await req.text();
-      headers["Content-Type"] = contentType || "application/json";
-    }
-  }
-
-  const upstream = await fetch(url.toString(), {
-    method: req.method,
-    headers,
-    body,
-  });
-
-  const responseBody = await upstream.arrayBuffer();
-
-  return new NextResponse(responseBody, {
-    status: upstream.status,
-    headers: {
-      "Content-Type": upstream.headers.get("Content-Type") || "application/json",
-    },
-  });
-}
+const proxy = createVicketProxy();
 
 export const GET = proxy;
 export const POST = proxy;

package/templates/next/src/app/components/vicket/ReplyForm.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { type FormEvent, useState } from "react";
+import { useRouter } from "next/navigation";
+import { cn, sendReply } from "vicket";
+
+/* ---------------------------------------------- */
+/*  Alert component                               */
+/* ---------------------------------------------- */
+function Alert({
+  type,
+  message,
+  onDismiss,
+}: {
+  type: "error" | "success";
+  message: string;
+  onDismiss?: () => void;
+}) {
+  return (
+    <div
+      className={cn("vk-alert vk-slide-up", type === "error" ? "error" : "success")}
+      role="alert"
+    >
+      <span>{type === "error" ? "\u26A0" : "\u2713"}</span>
+      <span>{message}</span>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="vk-alert-dismiss"
+          aria-label="Dismiss"
+        >
+          &#10005;
+        </button>
+      )}
+    </div>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  Reply Form                                     */
+/* ---------------------------------------------- */
+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 onSubmitReply = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError("");
+    setSuccess("");
+
+    if (!content.trim() && files.length === 0) {
+      setError("Reply content is required.");
+      return;
+    }
+
+    if (!token.trim()) {
+      setError("Missing ticket token.");
+      return;
+    }
+
+    setIsSending(true);
+    try {
+      await sendReply(token, content.trim(), files);
+      setContent("");
+      setFiles([]);
+      setSuccess("Reply sent.");
+      router.refresh();
+    } catch (replyError) {
+      setError(replyError instanceof Error ? replyError.message : "Unexpected error.");
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <>
+      {/* Alerts */}
+      {error && (
+        <Alert type="error" message={error} onDismiss={() => setError("")} />
+      )}
+      {success && (
+        <Alert type="success" message={success} onDismiss={() => setSuccess("")} />
+      )}
+
+      {/* Compose area */}
+      <div className="vk-compose">
+        <form className="vk-stack" onSubmit={onSubmitReply}>
+          <textarea
+            className="vk-textarea"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder="Write your reply..."
+          />
+
+          <div className="vk-compose-row">
+            {/* File input */}
+            <div className="vk-compose-files">
+              <label className="vk-browse-btn">
+                &#128206; Browse files
+                <input
+                  type="file"
+                  multiple
+                  onChange={(e) => {
+                    const newFiles = Array.from(e.target.files || []);
+                    setFiles((prev) => [...prev, ...newFiles]);
+                    e.target.value = "";
+                  }}
+                />
+              </label>
+              {files.map((file, i) => (
+                <span className="vk-file-chip" key={`${file.name}-${i}`}>
+                  &#128206;
+                  <span className="vk-file-chip-name">{file.name}</span>
+                  <button
+                    type="button"
+                    onClick={() => removeFile(i)}
+                    aria-label={`Remove ${file.name}`}
+                  >
+                    &#10005;
+                  </button>
+                </span>
+              ))}
+            </div>
+
+            {/* Send */}
+            <button
+              className="vk-button primary"
+              disabled={isSending}
+              type="submit"
+            >
+              {isSending ? (
+                <>
+                  <span className="vk-spinner" />
+                  Sending...
+                </>
+              ) : (
+                "Send"
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+}

package/templates/next/src/app/components/vicket/SupportContent.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import "../vicket.css";
+import type { Article, Faq, Template } from "vicket";
+import { cn, stripHtml, sanitizeHtml } from "vicket";
+import TicketDialog from "./TicketDialog";
+
+/* ---------------------------------------------- */
+/*  Alert component                               */
+/* ---------------------------------------------- */
+function Alert({
+  type,
+  message,
+  onDismiss,
+}: {
+  type: "error" | "success";
+  message: string;
+  onDismiss?: () => void;
+}) {
+  return (
+    <div
+      className={cn("vk-alert vk-slide-up", type === "error" ? "error" : "success")}
+      role="alert"
+    >
+      <span>{type === "error" ? "\u26A0" : "\u2713"}</span>
+      <span>{message}</span>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="vk-alert-dismiss"
+          aria-label="Dismiss"
+        >
+          &#10005;
+        </button>
+      )}
+    </div>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  FAQ Accordion item                            */
+/* ---------------------------------------------- */
+function FaqItem({ question, answer }: { question: string; answer: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="vk-faq-item">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="vk-faq-question"
+        aria-expanded={open}
+      >
+        {question}
+        <span className={cn("vk-faq-chevron", open && "open")}>&#9660;</span>
+      </button>
+      <div className={cn("vk-faq-body", open && "open")}>
+        <div>
+          <div className="vk-faq-answer">{answer}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  Props                                         */
+/* ---------------------------------------------- */
+type SupportContentProps = {
+  templates: Template[];
+  articles: Article[];
+  faqs: Faq[];
+  websiteName: string;
+  initialError: string;
+};
+
+/* ---------------------------------------------- */
+/*  Main component                                */
+/* ---------------------------------------------- */
+export default function SupportContent({
+  templates,
+  articles,
+  faqs,
+  websiteName,
+  initialError,
+}: SupportContentProps) {
+  const [error, setError] = useState(initialError);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedArticle, setSelectedArticle] = useState<Article | null>(null);
+
+  /* Filtered articles & FAQs by search query */
+  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="vk-shell">
+        <div className="vk-page vk-animate-in">
+          {/* Hero stays visible */}
+          <div className="vk-hero-row">
+            <div>
+              <h1 className="vk-hero-title">{websiteName}</h1>
+              <p className="vk-hero-subtitle">How can we help you today?</p>
+            </div>
+            {templates.length > 0 && (
+              <button
+                type="button"
+                className="vk-button primary pill"
+                onClick={() => setDialogOpen(true)}
+              >
+                &#128172; Contact Support
+              </button>
+            )}
+          </div>
+
+          {/* Article content */}
+          <div className="vk-article-viewer">
+            <button
+              type="button"
+              onClick={() => setSelectedArticle(null)}
+              className="vk-back-button"
+            >
+              &#8592; Back to articles
+            </button>
+
+            <div className="vk-article-viewer-card">
+              <h2 className="vk-article-viewer-title">{selectedArticle.title}</h2>
+              <div
+                className="vk-article-viewer-content vk-message-html"
+                dangerouslySetInnerHTML={{
+                  __html: sanitizeHtml(selectedArticle.content),
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        <TicketDialog
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+          templates={templates}
+        />
+      </div>
+    );
+  }
+
+  /* Home view */
+  return (
+    <div className="vk-shell">
+      <div className="vk-page vk-animate-in">
+        {/* Row 1 - Hero */}
+        <div className="vk-hero-row">
+          <div>
+            <h1 className="vk-hero-title">{websiteName}</h1>
+            <p className="vk-hero-subtitle">How can we help you today?</p>
+          </div>
+          {templates.length > 0 && (
+            <div className="vk-hero-cta">
+              <span className="vk-hero-cta-hint">
+                Can&apos;t find what you&apos;re looking for?
+              </span>
+              <button
+                type="button"
+                className="vk-button primary pill"
+                onClick={() => setDialogOpen(true)}
+              >
+                &#128172; Contact Support
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Alerts */}
+        {error && (
+          <Alert type="error" message={error} onDismiss={() => setError("")} />
+        )}
+
+        {/* Row 2 - Search bar */}
+        {hasContent && (
+          <div className="vk-search-wrap">
+            <span className="vk-search-icon">&#128269;</span>
+            <input
+              type="text"
+              className="vk-search-input"
+              placeholder="Search articles and FAQs..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        )}
+
+        {/* Row 3 - Split content */}
+        {hasResults && (
+          <div className="vk-content-grid">
+            {/* Left: Articles */}
+            {filteredArticles.length > 0 && (
+              <div>
+                <div className="vk-section-title-row">
+                  <span className="vk-section-title-icon">&#128196;</span>
+                  <h2 className="vk-section-title">Popular Articles</h2>
+                </div>
+                <div className="vk-article-list">
+                  {filteredArticles.map((article) => (
+                    <button
+                      key={article.id}
+                      type="button"
+                      className="vk-article-card"
+                      onClick={() => setSelectedArticle(article)}
+                    >
+                      <div className="vk-article-icon" aria-hidden="true">
+                        &#128196;
+                      </div>
+                      <div>
+                        <h3 className="vk-article-title">{article.title}</h3>
+                        {article.content && (
+                          <p className="vk-article-preview">
+                            {stripHtml(article.content).substring(0, 150)}
+                          </p>
+                        )}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Right: FAQs */}
+            {filteredFaqs.length > 0 && (
+              <div>
+                <div className="vk-section-title-row">
+                  <span className="vk-section-title-icon">&#10068;</span>
+                  <h2 className="vk-section-title">Frequently Asked Questions</h2>
+                </div>
+                <div className="vk-faq-list">
+                  {filteredFaqs.map((faq) => (
+                    <FaqItem key={faq.id} question={faq.question} answer={faq.answer} />
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* No search results */}
+        {searchQuery.trim() && !hasResults && (
+          <div className="vk-no-results">
+            No results found for &ldquo;{searchQuery}&rdquo;
+          </div>
+        )}
+
+        {/* Empty state - no articles and no FAQs at all */}
+        {!hasContent && !error && (
+          <div className="vk-cta-card">
+            <div className="vk-cta-icon">&#128172;</div>
+            <p className="vk-cta-text">Need help? Our team is here for you.</p>
+            <button
+              type="button"
+              className="vk-button primary pill"
+              onClick={() => setDialogOpen(true)}
+            >
+              Contact Support
+            </button>
+          </div>
+        )}
+      </div>
+
+      <TicketDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        templates={templates}
+      />
+    </div>
+  );
+}

package/templates/next/src/app/components/vicket/TicketDialog.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { type FormEvent, useMemo, useRef, useState } from "react";
-import type { FormValues, Template } from "../../utils/vicket/types";
-import { cn } from "../../utils/vicket/utils";
-import { createTicket, initialFormValues } from "../../utils/vicket/api";
+import type { FormValues, Template } from "vicket";
+import { cn } from "vicket";
+import { createTicket, initialFormValues } from "vicket";
 
 const MAX_FILES = 3;
 const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB