@vicket/create-support 1.1.1 → 1.1.2

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

@@ -1,425 +0,0 @@
-"use client";
-
-import { useSearchParams } from "next/navigation";
-import { type FormEvent, useEffect, useMemo, useState } from "react";
-import type { TicketThread, Message } from "@/lib/vicket";
-import { fetchThread, sendReply, sanitizeHtml, formatDate, cn, isFileAnswer, formatAnswerText, AUTHOR_LABELS } from "@/lib/vicket";
-
-/* ── Custom hook ─────────────────────────────────── */
-
-function useVicketTicket() {
-  const searchParams = useSearchParams();
-  const token = searchParams.get("token") || "";
-
-  const [thread, setThread] = useState<TicketThread | null>(null);
-  const [content, setContent] = useState("");
-  const [files, setFiles] = useState<File[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSending, setIsSending] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState("");
-
-  const hasToken = useMemo(() => token.trim().length > 0, [token]);
-
-  const loadThread = async () => {
-    if (!hasToken) {
-      setIsLoading(false);
-      setError("Missing ticket token in URL.");
-      return;
-    }
-    setIsLoading(true);
-    setError("");
-    try {
-      const data = await fetchThread(token);
-      setThread(data);
-    } catch (loadError) {
-      setError(loadError instanceof Error ? loadError.message : "Unexpected error.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    void loadThread();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token]);
-
-  const firstReporterMessage = useMemo(() => {
-    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;
-  }, [thread]);
-
-  const sortedMessages = useMemo(() => {
-    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);
-  }, [thread, firstReporterMessage]);
-
-  const summaryAnswers = useMemo(() => {
-    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;
-    });
-  }, [thread]);
-
-  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 (!hasToken) {
-      setError("Missing ticket token.");
-      return;
-    }
-    setIsSending(true);
-    try {
-      await sendReply(token, content.trim(), files);
-      setContent("");
-      setFiles([]);
-      setSuccess("Reply sent.");
-      await loadThread();
-    } catch (replyError) {
-      setError(replyError instanceof Error ? replyError.message : "Unexpected error.");
-    } finally {
-      setIsSending(false);
-    }
-  };
-
-  return {
-    thread, content, setContent, files, setFiles,
-    isLoading, isSending, error, setError, success, setSuccess,
-    firstReporterMessage, sortedMessages, summaryAnswers,
-    removeFile, onSubmitReply,
-  };
-}
-
-/* ── Sub-components ──────────────────────────────── */
-
-function Alert({ type, message, onDismiss }: { type: "error" | "success"; message: string; onDismiss?: () => void }) {
-  return (
-    <div
-      className={cn(
-        "flex items-start gap-3 rounded-xl border p-4 text-sm",
-        type === "error" ? "border-red-200 bg-red-50 text-red-900" : "border-green-200 bg-green-50 text-green-900",
-      )}
-      role="alert"
-    >
-      <span className="mt-0.5 shrink-0">
-        {type === "error" ? (
-          <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>
-        ) : (
-          <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">{message}</span>
-      {onDismiss && (
-        <button type="button" onClick={onDismiss} 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>
-  );
-}
-
-function Avatar({ authorType }: { authorType: string }) {
-  const colors =
-    authorType === "reporter" ? "bg-blue-600/15 text-blue-600"
-      : authorType === "user" ? "bg-emerald-500/15 text-emerald-500"
-        : "bg-slate-400/20 text-slate-400";
-
-  return (
-    <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", colors)} aria-hidden="true">
-      {(AUTHOR_LABELS[authorType] || "?")[0]}
-    </div>
-  );
-}
-
-function MessageItem({ message }: { message: Message }) {
-  if (message.author_type === "system") {
-    return (
-      <div className="flex gap-3 px-5 py-3.5">
-        <Avatar authorType="system" />
-        <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>
-    );
-  }
-
-  return (
-    <div className="flex gap-3 px-5 py-3.5">
-      <Avatar authorType={message.author_type} />
-      <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(
-            "vk-message-content mt-1.5 break-words rounded-xl px-4 py-3 text-sm leading-relaxed",
-            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>
-  );
-}
-
-function ThreadSkeleton() {
-  return (
-    <div className="space-y-6">
-      <div>
-        <div className="mb-3 h-7 w-64 rounded-lg animate-pulse bg-slate-200" />
-        <div className="flex gap-2">
-          <div className="h-6 w-20 rounded-full animate-pulse bg-slate-200" />
-          <div className="h-6 w-16 rounded-full animate-pulse bg-slate-200" />
-        </div>
-      </div>
-      <div className="rounded-2xl border border-slate-200 bg-white">
-        <div className="border-b border-slate-200 px-5 py-4">
-          <div className="h-5 w-28 rounded animate-pulse bg-slate-200" />
-        </div>
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="border-b border-slate-200 px-5 py-4 last:border-b-0">
-            <div className="flex gap-3">
-              <div className="h-7 w-7 shrink-0 rounded-full animate-pulse bg-slate-200" />
-              <div className="flex-1 space-y-2">
-                <div className="h-4 w-32 rounded animate-pulse bg-slate-200" />
-                <div className="h-14 w-full rounded-lg animate-pulse bg-slate-200" />
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function Badge({ label, variant }: { label: string; variant?: "status" | "priority" | "id" }) {
-  const colors =
-    variant === "priority" ? "border-amber-200 bg-amber-50 text-amber-700"
-      : variant === "id" ? "border-slate-200 bg-slate-50 font-mono text-slate-500"
-        : "border-blue-600/20 bg-blue-50 text-blue-600";
-  return (
-    <span className={cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold", colors)}>
-      {label}
-    </span>
-  );
-}
-
-/* ── Main component ──────────────────────────────── */
-
-export default function TicketPage() {
-  const {
-    thread, content, setContent, files, setFiles,
-    isLoading, isSending, error, setError, success, setSuccess,
-    firstReporterMessage, sortedMessages, summaryAnswers,
-    removeFile, onSubmitReply,
-  } = useVicketTicket();
-
-  return (
-    <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">
-        <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 && <div className="mb-4"><Alert type="error" message={error} onDismiss={() => setError("")} /></div>}
-        {success && <div className="mb-4"><Alert type="success" message={success} onDismiss={() => setSuccess("")} /></div>}
-
-        {isLoading && <ThreadSkeleton />}
-
-        {!isLoading && 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 && <Badge label={`#${thread.id.slice(0, 8)}`} variant="id" />}
-              </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" && <Badge label={thread.status.label} variant="status" />}
-                  {thread.priority?.label && thread.priority.label.toLowerCase() !== "low" && <Badge label={thread.priority.label} variant="priority" />}
-                </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="vk-message-content text-sm leading-relaxed text-slate-500" 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>
-
-              <div className="border-b border-slate-200 p-5">
-                <form className="space-y-3" onSubmit={onSubmitReply}>
-                  <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_TYPES = ["image/png","image/jpeg","image/gif","image/webp"];
-                            const newFiles = Array.from(e.target.files || []).filter((f) => ALLOWED_TYPES.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>
-
-              {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) => (
-                    <MessageItem key={message.id} message={message} />
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-
-      <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>
-    </div>
-  );
-}