@vicket/create-support 1.1.1 → 1.1.2

package/templates-tailwind/sveltekit/src/routes/api/vicket/[...path]/+server.ts

@@ -0,0 +1,3 @@
+import { createVicketProxy } from "vicket/sveltekit";
+
+export const { GET, POST } = createVicketProxy();

package/templates-tailwind/sveltekit/src/routes/support/+page.server.ts

@@ -0,0 +1,13 @@
+import { VICKET_API_URL, VICKET_API_KEY } from '$env/static/private';
+import { createServerClient } from 'vicket/server';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+  try {
+    const vicket = createServerClient({ apiUrl: VICKET_API_URL, apiKey: VICKET_API_KEY });
+    const initData = await vicket.fetchInit();
+    return { initData, initError: '' };
+  } catch (e) {
+    return { initData: null, initError: e instanceof Error ? e.message : 'Failed to load support data.' };
+  }
+};

package/templates-tailwind/sveltekit/src/routes/support/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import SupportPage from "$lib/vicket/SupportPage.svelte";
+  import SupportContent from "$lib/vicket/SupportContent.svelte";
+
+  let { data } = $props();
 </script>
 
-<SupportPage />
+<SupportContent initData={data.initData} initError={data.initError} />

package/templates-tailwind/sveltekit/src/routes/ticket/+page.server.ts

@@ -0,0 +1,19 @@
+import { VICKET_API_URL, VICKET_API_KEY } from '$env/static/private';
+import { createServerClient } from 'vicket/server';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+  const token = url.searchParams.get('token') || '';
+
+  if (!token.trim()) {
+    return { thread: null, fetchError: 'Missing ticket token in URL.', token };
+  }
+
+  try {
+    const vicket = createServerClient({ apiUrl: VICKET_API_URL, apiKey: VICKET_API_KEY });
+    const thread = await vicket.fetchThread(token);
+    return { thread, fetchError: '', token };
+  } catch (e) {
+    return { thread: null, fetchError: e instanceof Error ? e.message : 'Failed to load ticket.', token };
+  }
+};

package/templates-tailwind/sveltekit/src/routes/ticket/+page.svelte

@@ -1,5 +1,295 @@
 <script lang="ts">
-  import TicketPage from "$lib/vicket/TicketPage.svelte";
+  import { cn, sanitizeHtml, stripHtml, formatDate, isFileAnswer, formatAnswerText, AUTHOR_LABELS, type TicketThread, type Message, type TicketAnswer } from "vicket";
+  import ReplyForm from "$lib/vicket/ReplyForm.svelte";
+
+  let { data } = $props();
+
+  let thread = $derived<TicketThread | null>(data.thread || null);
+  let error = $state(data.fetchError || "");
+  let token = $derived(data.token);
+
+  let firstReporterMessage = $derived.by(() => {
+    if (!thread?.messages || thread.messages.length === 0) return null;
+    const sorted = [...thread.messages].sort(
+      (a: Message, b: Message) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
+    );
+    return sorted[0].author_type === "reporter" ? sorted[0] : null;
+  });
+
+  let sortedMessages = $derived.by(() => {
+    if (!thread?.messages) return [];
+    return [...thread.messages]
+      .sort((a: Message, b: Message) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+      .filter((m: Message) => !firstReporterMessage || m.id !== firstReporterMessage.id);
+  });
+
+  let summaryAnswers = $derived.by(() => {
+    if (!thread?.answers) return [];
+    return thread.answers.filter((answer: TicketAnswer) => {
+      if (answer.attachments && answer.attachments.length > 0) return true;
+      if (answer.answer && answer.answer.trim().length > 0) return true;
+      return false;
+    });
+  });
 </script>
 
-<TicketPage />
+<div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
+  <div class="mx-auto max-w-4xl px-6 py-16">
+    <!-- Back link -->
+    <div class="mb-6">
+      <a href="/support" class="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" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
+        Back to support
+      </a>
+    </div>
+
+    <!-- Error alert -->
+    {#if error}
+      <div class="mb-6 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">
+          <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" onclick={() => (error = "")} class="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" 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>
+    {/if}
+
+    <!-- Thread -->
+    {#if thread}
+      <div class="space-y-6">
+        <!-- Header -->
+        <div>
+          <div class="flex items-start gap-3">
+            <h1 class="m-0 flex-1 text-xl font-bold text-slate-900 md:text-2xl">{thread.title}</h1>
+            {#if thread.id}
+              <span class="shrink-0 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500">
+                #{thread.id.slice(0, 8)}
+              </span>
+            {/if}
+          </div>
+          {#if (thread.status?.label && thread.status.label.toLowerCase() !== "open") || (thread.priority?.label && thread.priority.label.toLowerCase() !== "low")}
+            <div class="mt-3 flex flex-wrap gap-2">
+              {#if thread.status?.label && thread.status.label.toLowerCase() !== "open"}
+                <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">
+                  {thread.status.label}
+                </span>
+              {/if}
+              {#if thread.priority?.label && thread.priority.label.toLowerCase() !== "low"}
+                <span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
+                  {thread.priority.label}
+                </span>
+              {/if}
+            </div>
+          {/if}
+        </div>
+
+        <!-- Summary (ticket form answers) -->
+        {#if summaryAnswers.length > 0}
+          <div class="rounded-2xl border border-slate-200 bg-white shadow-sm">
+            <div class="flex items-center gap-2 border-b border-slate-100 px-5 py-3">
+              <span class="text-slate-400">
+                <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 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>
+              </span>
+              <h2 class="m-0 text-sm font-semibold text-slate-900">Summary</h2>
+            </div>
+            <div class="divide-y divide-slate-50 px-5">
+              {#each summaryAnswers as answer (answer.id)}
+                <div class="py-3">
+                  <p class="m-0 text-xs font-semibold uppercase tracking-wider text-slate-400">{answer.question_label || "Question"}</p>
+                  {#if answer.attachments && answer.attachments.length > 0}
+                    <div class="mt-1.5 flex flex-wrap gap-1.5">
+                      {#each answer.attachments as attachment (attachment.id)}
+                        <a
+                          class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-600 no-underline transition-colors hover:bg-slate-100"
+                          href={attachment.url}
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          <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="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>
+                          {attachment.original_filename}
+                        </a>
+                      {/each}
+                    </div>
+                  {:else if isFileAnswer(answer.answer)}
+                    <p class="m-0 mt-1 text-sm italic text-slate-400">File uploaded</p>
+                  {:else}
+                    <p class="m-0 mt-1 text-sm text-slate-700">{formatAnswerText(answer.answer) || "-"}</p>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          </div>
+        {/if}
+
+        <!-- Description (first reporter message) -->
+        {#if firstReporterMessage}
+          <div class="rounded-2xl border border-slate-200 bg-white shadow-sm">
+            <div class="flex items-center gap-2 border-b border-slate-100 px-5 py-3">
+              <span class="text-slate-400">
+                <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 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>
+              </span>
+              <h2 class="m-0 text-sm font-semibold text-slate-900">Description</h2>
+            </div>
+            <div class="px-5 py-4">
+              <div class="vk-message-content text-sm leading-relaxed text-slate-700">
+                {@html sanitizeHtml(firstReporterMessage.content)}
+              </div>
+              {#if firstReporterMessage.attachments && firstReporterMessage.attachments.length > 0}
+                <div class="mt-3 flex flex-wrap gap-1.5">
+                  {#each firstReporterMessage.attachments as att (att.id)}
+                    <a
+                      href={att.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-600 no-underline transition-colors hover:bg-slate-100"
+                    >
+                      <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="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>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/if}
+
+        <!-- Comments card -->
+        <div class="rounded-2xl border border-slate-200 bg-white shadow-sm">
+          <div class="flex items-center gap-2 border-b border-slate-100 px-5 py-3">
+            <span class="text-slate-400">
+              <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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+            </span>
+            <h2 class="m-0 text-sm font-semibold text-slate-900">Comments</h2>
+          </div>
+
+          <!-- Interactive reply form -->
+          <ReplyForm {token} />
+
+          <!-- Message list -->
+          {#if sortedMessages.length === 0}
+            <div class="px-5 py-10 text-center">
+              <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 text-slate-400">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+              </div>
+              <p class="m-0 text-sm text-slate-500">No messages yet. Be the first to reply!</p>
+            </div>
+          {:else}
+            <div class="divide-y divide-slate-50">
+              {#each sortedMessages as message (message.id)}
+                {#if message.author_type === "system"}
+                  <!-- System message -->
+                  <div class="flex gap-3 px-5 py-4">
+                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-500" aria-hidden="true">
+                      S
+                    </div>
+                    <div class="min-w-0 flex-1">
+                      <div class="flex items-center gap-2">
+                        <span class="text-xs font-semibold italic text-slate-400">System</span>
+                        <span class="text-xs text-slate-400">{formatDate(message.created_at)}</span>
+                      </div>
+                      <p class="m-0 mt-1 text-sm italic text-slate-500">
+                        {stripHtml(message.content)}
+                      </p>
+                    </div>
+                  </div>
+                {:else}
+                  <!-- Regular message -->
+                  <div class="flex gap-3 px-5 py-4">
+                    <div class={cn(
+                      "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold",
+                      message.author_type === "reporter" ? "bg-blue-100 text-blue-700" : "bg-green-100 text-green-700"
+                    )} aria-hidden="true">
+                      {(AUTHOR_LABELS[message.author_type] || "?")[0]}
+                    </div>
+                    <div class="min-w-0 flex-1">
+                      <div class="flex items-center gap-2">
+                        <span class="text-xs font-semibold text-slate-900">{AUTHOR_LABELS[message.author_type] || message.author_type}</span>
+                        <span class="text-xs text-slate-400">{formatDate(message.created_at)}</span>
+                      </div>
+                      <div class={cn(
+                        "mt-1.5 rounded-xl px-4 py-3 text-sm leading-relaxed",
+                        message.author_type === "user" ? "bg-green-50 text-slate-800" : "bg-slate-50 text-slate-800"
+                      )}>
+                        <div class="vk-message-content">
+                          {@html sanitizeHtml(message.content)}
+                        </div>
+                      </div>
+                      {#if message.attachments && message.attachments.length > 0}
+                        <div class="mt-2 flex flex-wrap gap-1.5">
+                          {#each message.attachments as attachment (attachment.id)}
+                            <a
+                              class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-600 no-underline transition-colors hover:bg-slate-100"
+                              href={attachment.url}
+                              rel="noopener noreferrer"
+                              target="_blank"
+                            >
+                              <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="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>
+                              {attachment.original_filename}
+                            </a>
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                {/if}
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  :global(.vk-message-content h1,
+  .vk-message-content h2,
+  .vk-message-content h3,
+  .vk-message-content h4,
+  .vk-message-content h5,
+  .vk-message-content h6) {
+    margin: 1em 0 0.5em;
+    line-height: 1.4;
+  }
+  :global(.vk-message-content p) {
+    margin: 0.5em 0;
+  }
+  :global(.vk-message-content ul,
+  .vk-message-content ol) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+  }
+  :global(.vk-message-content a) {
+    color: #2563eb;
+    text-decoration: underline;
+  }
+  :global(.vk-message-content img) {
+    max-width: 100%;
+    border-radius: 0.5rem;
+  }
+  :global(.vk-message-content pre) {
+    background: #f1f5f9;
+    padding: 0.75em 1em;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    font-size: 0.85em;
+  }
+  :global(.vk-message-content code) {
+    background: #f1f5f9;
+    padding: 0.15em 0.35em;
+    border-radius: 0.25rem;
+    font-size: 0.9em;
+  }
+  :global(.vk-message-content pre code) {
+    background: none;
+    padding: 0;
+  }
+  :global(.vk-message-content blockquote) {
+    border-left: 3px solid #cbd5e1;
+    margin: 0.5em 0;
+    padding-left: 1em;
+    color: #64748b;
+  }
+</style>

package/templates/next/src/app/utils/vicket/api.ts

@@ -1,149 +0,0 @@
-/* ---------------------------------------------- */
-/*  API functions and constants for Vicket pages  */
-/* ---------------------------------------------- */
-
-import type { FormValues, SupportInitResponse, TicketThread } from "./types";
-
-export const PROXY_BASE = "/api/vicket";
-
-export const initialFormValues: FormValues = { email: "", title: "", answers: {} };
-
-export const AUTHOR_LABELS: Record<string, string> = {
-  reporter: "You",
-  user: "Support",
-  system: "System",
-};
-
-export async function fetchSupportInit(): Promise<NonNullable<SupportInitResponse["data"]>> {
-  const response = await fetch(`${PROXY_BASE}/init`, {
-    method: "GET",
-    cache: "no-store",
-    headers: { "Content-Type": "application/json" },
-  });
-  const payload = (await response.json()) as SupportInitResponse;
-
-  if (!response.ok || !payload?.success || !payload?.data) {
-    throw new Error(payload?.error || "Failed to load support data.");
-  }
-
-  return payload.data;
-}
-
-export async function createTicket(body: {
-  email: string;
-  title: string;
-  templateId: string;
-  answers: Record<string, unknown>;
-  hasFiles: boolean;
-  fileQuestionIds: string[];
-}): Promise<{ emailLimitReached?: boolean; warning?: string }> {
-  const payload = {
-    email: body.email,
-    title: body.title,
-    templateId: body.templateId,
-    answers: { ...body.answers },
-  };
-
-  let response: Response;
-  if (body.hasFiles) {
-    const formData = new FormData();
-    const normalizedAnswers: Record<string, unknown> = {};
-    for (const [questionId, answer] of Object.entries(payload.answers)) {
-      if (Array.isArray(answer) && answer.length > 0 && answer[0] instanceof File) {
-        (answer as File[]).forEach((f) => formData.append(`files[${questionId}]`, f));
-        normalizedAnswers[questionId] = "__isFile:true";
-      } else if (answer instanceof File) {
-        formData.append(`files[${questionId}]`, answer);
-        normalizedAnswers[questionId] = "__isFile:true";
-      } else {
-        normalizedAnswers[questionId] = answer;
-      }
-    }
-    formData.append("data", JSON.stringify({ ...payload, answers: normalizedAnswers }));
-    response = await fetch(`${PROXY_BASE}/tickets`, {
-      method: "POST",
-      body: formData,
-    });
-  } else {
-    response = await fetch(`${PROXY_BASE}/tickets`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload),
-    });
-  }
-
-  const responsePayload = (await response.json()) as {
-    error?: string;
-    success?: boolean;
-    data?: { email_limit_reached?: boolean; warning?: string };
-  };
-  if (!response.ok || !responsePayload?.success) {
-    throw new Error(responsePayload?.error || "Failed to create ticket.");
-  }
-
-  return {
-    emailLimitReached: responsePayload.data?.email_limit_reached ?? false,
-    warning: responsePayload.data?.warning,
-  };
-}
-
-export async function fetchTicketThread(token: string): Promise<TicketThread> {
-  const response = await fetch(
-    `${PROXY_BASE}/ticket?token=${encodeURIComponent(token)}`,
-    {
-      method: "GET",
-      cache: "no-store",
-      headers: { "Content-Type": "application/json" },
-    },
-  );
-  const payload = (await response.json()) as {
-    success?: boolean;
-    error?: string;
-    error_code?: string;
-    data?: TicketThread;
-  };
-
-  if (!response.ok || !payload?.success || !payload?.data) {
-    if (payload?.error_code === "ticket-link-expired") {
-      throw new Error("This link has expired. A new secure link has been sent to your email.");
-    }
-    throw new Error(payload?.error || "Failed to load ticket.");
-  }
-
-  return payload.data;
-}
-
-export async function sendReply(token: string, content: string, files: File[]): Promise<void> {
-  const url = `${PROXY_BASE}/ticket/messages?token=${encodeURIComponent(token)}`;
-
-  let response: Response;
-  if (files.length > 0) {
-    const formData = new FormData();
-    formData.append("data", JSON.stringify({ content }));
-    for (const file of files) {
-      formData.append("files", file);
-    }
-    response = await fetch(url, {
-      method: "POST",
-      body: formData,
-    });
-  } else {
-    response = await fetch(url, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ content }),
-    });
-  }
-
-  const payload = (await response.json()) as {
-    success?: boolean;
-    error?: string;
-    error_code?: string;
-  };
-  if (!response.ok || !payload?.success) {
-    if (payload?.error_code === "ticket-link-expired") {
-      throw new Error("This link has expired. A new secure link has been sent to your email.");
-    }
-    throw new Error(payload?.error || "Failed to send reply.");
-  }
-}

package/templates/next/src/app/utils/vicket/types.ts

@@ -1,85 +0,0 @@
-/* ---------------------------------------------- */
-/*  Shared types for Vicket support pages         */
-/* ---------------------------------------------- */
-
-export type TemplateOption = {
-  id: string;
-  label: string;
-  value: string;
-};
-
-export type TemplateQuestion = {
-  id: string;
-  label: string;
-  type: "TEXT" | "TEXTAREA" | "SELECT" | "CHECKBOX" | "DATE" | "FILE";
-  required: boolean;
-  order: number;
-  options?: TemplateOption[];
-};
-
-export type Template = {
-  id: string;
-  name: string;
-  description: string;
-  questions: TemplateQuestion[];
-};
-
-export type Article = {
-  id: string;
-  title: string;
-  slug: string;
-  content: string;
-};
-
-export type Faq = {
-  id: string;
-  question: string;
-  answer: string;
-};
-
-export type SupportInitResponse = {
-  success: boolean;
-  data?: {
-    website?: { name?: string };
-    templates: Template[];
-    articles?: Article[];
-    faqs?: Faq[];
-  };
-  error?: string;
-};
-
-export type FormValues = {
-  email: string;
-  title: string;
-  answers: Record<string, unknown>;
-};
-
-export type Attachment = {
-  id: string;
-  original_filename: string;
-  url: string;
-};
-
-export type Message = {
-  id: string;
-  content: string;
-  author_type: "reporter" | "user" | "system";
-  created_at: string;
-  attachments?: Attachment[];
-};
-
-export type TicketAnswer = {
-  id: string;
-  question_label: string;
-  answer: string;
-  attachments?: Attachment[];
-};
-
-export type TicketThread = {
-  id: string;
-  title: string;
-  status?: { label: string };
-  priority?: { label: string };
-  messages: Message[];
-  answers?: TicketAnswer[];
-};

package/templates/next/src/app/utils/vicket/utils.ts

@@ -1,49 +0,0 @@
-/* ---------------------------------------------- */
-/*  Shared utility functions for Vicket pages     */
-/* ---------------------------------------------- */
-
-export function cn(...classes: (string | false | null | undefined)[]): string {
-  return classes.filter(Boolean).join(" ");
-}
-
-export function stripHtml(html: string): string {
-  return html.replace(/<[^>]*>/g, "");
-}
-
-export function sanitizeHtml(html: string): string {
-  return html
-    .replace(/<script[\s\S]*?<\/script>/gi, "")
-    .replace(/\son\w+="[^"]*"/gi, "")
-    .replace(/\son\w+='[^']*'/gi, "")
-    .replace(/href\s*=\s*"javascript:[^"]*"/gi, 'href="#"')
-    .replace(/href\s*=\s*'javascript:[^']*'/gi, "href='#'");
-}
-
-export function formatDate(iso: string): string {
-  try {
-    return new Intl.DateTimeFormat("en", {
-      month: "short",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-    }).format(new Date(iso));
-  } catch {
-    return iso;
-  }
-}
-
-export function isFileAnswer(answer: string): boolean {
-  return answer?.includes("__isFile:true") || answer?.includes("map[__isFile");
-}
-
-export function formatAnswerText(value: string): string {
-  if (!value) return "";
-
-  const trimmed = value.trim();
-  if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
-    const rawItems = trimmed.slice(1, -1).trim();
-    return rawItems.length > 0 ? rawItems.split(/\s+/).join(", ") : "";
-  }
-
-  return value;
-}