@vicket/create-support 1.1.1 → 1.1.2

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

@@ -1,276 +1,55 @@
-"use client";
-
-import { useSearchParams } from "next/navigation";
-import { type FormEvent, useEffect, useMemo, useState } from "react";
+import { createServerClient } from "vicket/server";
+import type { TicketThread } from "vicket";
+import { cn, sanitizeHtml, stripHtml, formatDate, isFileAnswer, formatAnswerText, AUTHOR_LABELS } from "vicket";
 import "../vicket.css";
-import type { Message, TicketThread } from "../utils/vicket/types";
-import { cn, sanitizeHtml, stripHtml, formatDate, isFileAnswer, formatAnswerText } from "../utils/vicket/utils";
-import { AUTHOR_LABELS, fetchTicketThread, sendReply } from "../utils/vicket/api";
-
-/* ---------------------------------------------- */
-/*  Skeleton loader                               */
-/* ---------------------------------------------- */
-function ThreadSkeleton() {
-  return (
-    <div className="vk-stack vk-animate-in">
-      {/* Header skeleton */}
-      <div>
-        <div className="vk-skeleton" aria-hidden="true">
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        </div>
-        <div className="vk-compose-files">
-          <span className="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-          <span className="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        </div>
-      </div>
-      {/* Messages skeleton */}
-      <div className="vk-section-card">
-        <div className="vk-section-header">
-          <span className="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        </div>
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="vk-message">
-            <div className="vk-avatar vk-skeleton" aria-hidden="true">&nbsp;</div>
-            <div className="vk-message-content">
-              <div className="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
-              <div className="vk-skeleton" aria-hidden="true">&nbsp;</div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/* ---------------------------------------------- */
-/*  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>
-  );
-}
-
-/* ---------------------------------------------- */
-/*  Badge component                               */
-/* ---------------------------------------------- */
-function Badge({
-  label,
-  variant,
-}: {
-  label: string;
-  variant?: "status" | "priority" | "id";
-}) {
-  return (
-    <span className={cn("vk-badge", variant || "status")}>
-      {label}
-    </span>
-  );
-}
+import ReplyForm from "../components/vicket/ReplyForm";
 
-/* ---------------------------------------------- */
-/*  Avatar                                        */
-/* ---------------------------------------------- */
-function Avatar({ authorType }: { authorType: string }) {
-  return (
-    <div
-      className={cn("vk-avatar", `vk-avatar-${authorType}`)}
-      aria-hidden="true"
-    >
-      {(AUTHOR_LABELS[authorType] || "?")[0]}
-    </div>
-  );
-}
+type Props = {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+};
 
-/* ---------------------------------------------- */
-/*  Message item                                  */
-/* ---------------------------------------------- */
-function MessageItem({ message }: { message: Message }) {
-  const isSystem = message.author_type === "system";
-  const isSupport = message.author_type === "user";
+export default async function TicketPage({ searchParams }: Props) {
+  const { token } = await searchParams;
+  const tokenStr = typeof token === "string" ? token : "";
 
-  if (isSystem) {
-    return (
-      <div className="vk-message">
-        <Avatar authorType="system" />
-        <div className="vk-message-content">
-          <div className="vk-message-meta">
-            <span className="vk-author-name system">System</span>
-            <span className="vk-message-time">{formatDate(message.created_at)}</span>
-          </div>
-          <p className="vk-system-text">
-            {stripHtml(message.content)}
-          </p>
-        </div>
-      </div>
-    );
-  }
+  let thread: TicketThread | null = null;
+  let fetchError = "";
 
-  return (
-    <div className="vk-message">
-      <Avatar authorType={message.author_type} />
-      <div className="vk-message-content">
-        <div className="vk-message-meta">
-          <span className="vk-author-name">
-            {AUTHOR_LABELS[message.author_type] || message.author_type}
-          </span>
-          <span className="vk-message-time">{formatDate(message.created_at)}</span>
-        </div>
-        <div
-          className={cn(
-            "vk-message-bubble",
-            isSupport && "support",
-          )}
-        >
-          <div
-            className="vk-message-html"
-            dangerouslySetInnerHTML={{
-              __html: sanitizeHtml(message.content),
-            }}
-          />
-        </div>
-        {message.attachments && message.attachments.length > 0 && (
-          <div className="vk-attachments">
-            {message.attachments.map((attachment) => (
-              <a
-                className="vk-attachment"
-                href={attachment.url}
-                key={attachment.id}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                &#128206; <span>{attachment.original_filename}</span>
-              </a>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/* ---------------------------------------------- */
-/*  Main page                                     */
-/* ---------------------------------------------- */
-export default function TicketPage() {
-  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("");
+  if (!tokenStr.trim()) {
+    fetchError = "Missing ticket token in URL.";
+  } else {
     try {
-      const data = await fetchTicketThread(token);
-      setThread(data);
-    } catch (loadError) {
-      setError(loadError instanceof Error ? loadError.message : "Unexpected error.");
-    } finally {
-      setIsLoading(false);
+      const vicket = createServerClient();
+      thread = await vicket.fetchThread(tokenStr);
+    } catch (e) {
+      fetchError = e instanceof Error ? e.message : "Failed to load ticket.";
     }
-  };
-
-  useEffect(() => {
-    void loadThread();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token]);
+  }
 
-  const firstReporterMessage = useMemo(() => {
+  /* Derive data from thread */
+  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(),
     );
-    // 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(() => {
+  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);
-  }, [thread, firstReporterMessage]);
+  })();
 
-  const summaryAnswers = useMemo(() => {
+  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;
     });
-  }, [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 (
     <div className="vk-shell">
@@ -282,36 +61,42 @@ export default function TicketPage() {
           </a>
         </div>
 
-        {/* Alerts */}
-        {error && (
-          <Alert type="error" message={error} onDismiss={() => setError("")} />
-        )}
-        {success && (
-          <Alert type="success" message={success} onDismiss={() => setSuccess("")} />
+        {/* Error */}
+        {fetchError && (
+          <div
+            className={cn("vk-alert vk-slide-up", "error")}
+            role="alert"
+          >
+            <span>{"\u26A0"}</span>
+            <span>{fetchError}</span>
+          </div>
         )}
 
-        {/* Loading */}
-        {isLoading && <ThreadSkeleton />}
-
         {/* Thread */}
-        {!isLoading && thread && (
+        {thread && (
           <div className="vk-stack">
             {/* Header */}
             <div>
               <div className="vk-ticket-header">
                 <h1 className="vk-ticket-title">{thread.title}</h1>
                 {thread.id && (
-                  <Badge label={`#${thread.id.slice(0, 8)}`} variant="id" />
+                  <span className={cn("vk-badge", "id")}>
+                    {`#${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="vk-ticket-badges">
                   {thread.status?.label && thread.status.label.toLowerCase() !== "open" && (
-                    <Badge label={thread.status.label} variant="status" />
+                    <span className={cn("vk-badge", "status")}>
+                      {thread.status.label}
+                    </span>
                   )}
                   {thread.priority?.label && thread.priority.label.toLowerCase() !== "low" && (
-                    <Badge label={thread.priority.label} variant="priority" />
+                    <span className={cn("vk-badge", "priority")}>
+                      {thread.priority.label}
+                    </span>
                   )}
                 </div>
               )}
@@ -397,64 +182,8 @@ export default function TicketPage() {
                 <h2>Comments</h2>
               </div>
 
-              {/* 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>
+              {/* Reply form (client component) */}
+              <ReplyForm token={tokenStr} />
 
               {/* Message list */}
               {sortedMessages.length === 0 ? (
@@ -466,12 +195,68 @@ export default function TicketPage() {
                 </div>
               ) : (
                 <div className="vk-message-list">
-                  {sortedMessages.map((message, index) => (
-                    <div key={message.id}>
-                      {index > 0 && <hr className="vk-message-divider" />}
-                      <MessageItem message={message} />
-                    </div>
-                  ))}
+                  {sortedMessages.map((message, index) => {
+                    const isSystem = message.author_type === "system";
+                    const isSupport = message.author_type === "user";
+
+                    return (
+                      <div key={message.id}>
+                        {index > 0 && <hr className="vk-message-divider" />}
+                        <div className="vk-message">
+                          <div
+                            className={cn("vk-avatar", `vk-avatar-${message.author_type}`)}
+                            aria-hidden="true"
+                          >
+                            {(AUTHOR_LABELS[message.author_type] || "?")[0]}
+                          </div>
+                          <div className="vk-message-content">
+                            <div className="vk-message-meta">
+                              <span className={cn("vk-author-name", isSystem && "system")}>
+                                {isSystem ? "System" : (AUTHOR_LABELS[message.author_type] || message.author_type)}
+                              </span>
+                              <span className="vk-message-time">{formatDate(message.created_at)}</span>
+                            </div>
+                            {isSystem ? (
+                              <p className="vk-system-text">
+                                {stripHtml(message.content)}
+                              </p>
+                            ) : (
+                              <>
+                                <div
+                                  className={cn(
+                                    "vk-message-bubble",
+                                    isSupport && "support",
+                                  )}
+                                >
+                                  <div
+                                    className="vk-message-html"
+                                    dangerouslySetInnerHTML={{
+                                      __html: sanitizeHtml(message.content),
+                                    }}
+                                  />
+                                </div>
+                                {message.attachments && message.attachments.length > 0 && (
+                                  <div className="vk-attachments">
+                                    {message.attachments.map((attachment) => (
+                                      <a
+                                        className="vk-attachment"
+                                        href={attachment.url}
+                                        key={attachment.id}
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                      >
+                                        &#128206; <span>{attachment.original_filename}</span>
+                                      </a>
+                                    ))}
+                                  </div>
+                                )}
+                              </>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
                 </div>
               )}
             </div>