@vicket/create-support 1.1.1

package/templates/nuxt/app/pages/ticket.vue

@@ -0,0 +1,434 @@
+<script setup lang="ts">
+import type { TicketThread as TicketThreadType } from "~/composables/useVicket";
+import {
+  cn,
+  stripHtml,
+  sanitizeHtml,
+  formatDate,
+  isFileAnswer,
+  formatAnswerText,
+  AUTHOR_LABELS,
+  fetchTicketThread,
+  sendReply,
+} from "~/composables/useVicket";
+
+/* ---------------------------------------------- */
+/*  Reactive state                                 */
+/* ---------------------------------------------- */
+const route = useRoute();
+const token = computed(() => String(route.query.token || ""));
+const hasToken = computed(() => token.value.trim().length > 0);
+
+const thread = ref<TicketThreadType | null>(null);
+const content = ref("");
+const files = ref<File[]>([]);
+const isLoading = ref(true);
+const isSending = ref(false);
+const error = ref("");
+const success = ref("");
+
+/* ---------------------------------------------- */
+/*  Computed                                       */
+/* ---------------------------------------------- */
+const firstReporterMessage = computed(() => {
+  if (!thread.value?.messages || thread.value.messages.length === 0) return null;
+  const sorted = [...thread.value.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;
+});
+
+const sortedMessages = computed(() => {
+  if (!thread.value?.messages) return [];
+  return [...thread.value.messages]
+    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+    .filter((m) => !firstReporterMessage.value || m.id !== firstReporterMessage.value.id);
+});
+
+const summaryAnswers = computed(() => {
+  if (!thread.value?.answers) return [];
+  return thread.value.answers.filter((answer) => {
+    if (answer.attachments && answer.attachments.length > 0) return true;
+    if (answer.answer && answer.answer.trim().length > 0) return true;
+    return false;
+  });
+});
+
+/* ---------------------------------------------- */
+/*  Helpers                                        */
+/* ---------------------------------------------- */
+const removeFile = (index: number) => {
+  files.value = files.value.filter((_, i) => i !== index);
+};
+
+const onFileChange = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const newFiles = Array.from(input.files || []);
+  files.value = [...files.value, ...newFiles];
+  input.value = "";
+};
+
+/* ---------------------------------------------- */
+/*  Data loading                                   */
+/* ---------------------------------------------- */
+const loadThread = async () => {
+  if (!hasToken.value) {
+    isLoading.value = false;
+    error.value = "Missing ticket token in URL.";
+    return;
+  }
+
+  isLoading.value = true;
+  error.value = "";
+  try {
+    const data = await fetchTicketThread(token.value);
+    thread.value = data;
+  } catch (loadError) {
+    error.value = loadError instanceof Error ? loadError.message : "Unexpected error.";
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const submitReply = async () => {
+  error.value = "";
+  success.value = "";
+
+  if (!content.value.trim() && files.value.length === 0) {
+    error.value = "Reply content is required.";
+    return;
+  }
+
+  if (!hasToken.value) {
+    error.value = "Missing ticket token.";
+    return;
+  }
+
+  isSending.value = true;
+  try {
+    await sendReply(token.value, content.value.trim(), files.value);
+    content.value = "";
+    files.value = [];
+    success.value = "Reply sent.";
+    await loadThread();
+  } catch (replyError) {
+    error.value = replyError instanceof Error ? replyError.message : "Unexpected error.";
+  } finally {
+    isSending.value = false;
+  }
+};
+
+watch(
+  () => token.value,
+  () => {
+    void loadThread();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="vk-shell">
+    <div class="vk-page vk-animate-in">
+      <!-- Back link -->
+      <div class="vk-ticket-badges">
+        <NuxtLink to="/support" class="vk-back-link">
+          &#8592; Back to support
+        </NuxtLink>
+      </div>
+
+      <!-- Alerts -->
+      <div
+        v-if="error"
+        :class="cn('vk-alert vk-slide-up', 'error')"
+        role="alert"
+      >
+        <span>&#9888;</span>
+        <span>{{ error }}</span>
+        <button
+          type="button"
+          class="vk-alert-dismiss"
+          aria-label="Dismiss"
+          @click="error = ''"
+        >
+          &#10005;
+        </button>
+      </div>
+      <div
+        v-if="success"
+        :class="cn('vk-alert vk-slide-up', 'success')"
+        role="alert"
+      >
+        <span>&#10003;</span>
+        <span>{{ success }}</span>
+        <button
+          type="button"
+          class="vk-alert-dismiss"
+          aria-label="Dismiss"
+          @click="success = ''"
+        >
+          &#10005;
+        </button>
+      </div>
+
+      <!-- Loading skeleton -->
+      <div v-if="isLoading" class="vk-stack vk-animate-in">
+        <!-- Header skeleton -->
+        <div>
+          <div class="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 class="vk-compose-files">
+            <span class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+            <span class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          </div>
+        </div>
+        <!-- Messages skeleton -->
+        <div class="vk-section-card">
+          <div class="vk-section-header">
+            <span class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          </div>
+          <div v-for="i in 3" :key="i" class="vk-message">
+            <div class="vk-avatar vk-skeleton" aria-hidden="true">&nbsp;</div>
+            <div class="vk-message-content">
+              <div class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
+              <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Thread -->
+      <div v-if="!isLoading && thread" class="vk-stack">
+        <!-- Header -->
+        <div>
+          <div class="vk-ticket-header">
+            <h1 class="vk-ticket-title">{{ thread.title }}</h1>
+            <span v-if="thread.id" class="vk-badge id">
+              #{{ thread.id.slice(0, 8) }}
+            </span>
+          </div>
+          <div
+            v-if="
+              (thread.status?.label && thread.status.label.toLowerCase() !== 'open') ||
+              (thread.priority?.label && thread.priority.label.toLowerCase() !== 'low')
+            "
+            class="vk-ticket-badges"
+          >
+            <span
+              v-if="thread.status?.label && thread.status.label.toLowerCase() !== 'open'"
+              class="vk-badge status"
+            >
+              {{ thread.status.label }}
+            </span>
+            <span
+              v-if="thread.priority?.label && thread.priority.label.toLowerCase() !== 'low'"
+              class="vk-badge priority"
+            >
+              {{ thread.priority.label }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Summary (ticket form answers) -->
+        <div v-if="summaryAnswers.length > 0" class="vk-section-card">
+          <div class="vk-section-header">
+            <span class="vk-section-header-icon">&#128221;</span>
+            <h2>Summary</h2>
+          </div>
+          <div class="vk-section-body">
+            <div class="vk-summary-list">
+              <div
+                v-for="answer in summaryAnswers"
+                :key="answer.id"
+                class="vk-summary-item"
+              >
+                <p class="vk-summary-label">{{ answer.question_label || "Question" }}</p>
+                <div
+                  v-if="answer.attachments && answer.attachments.length > 0"
+                  class="vk-attachments"
+                >
+                  <a
+                    v-for="attachment in answer.attachments"
+                    :key="attachment.id"
+                    class="vk-attachment"
+                    :href="attachment.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    &#128206; <span>{{ attachment.original_filename }}</span>
+                  </a>
+                </div>
+                <p v-else-if="isFileAnswer(answer.answer)" class="vk-summary-value muted">
+                  File uploaded
+                </p>
+                <p v-else class="vk-summary-value">
+                  {{ formatAnswerText(answer.answer) || "-" }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Description (first reporter message) -->
+        <div v-if="firstReporterMessage" class="vk-section-card">
+          <div class="vk-section-header">
+            <span class="vk-section-header-icon">&#128196;</span>
+            <h2>Description</h2>
+          </div>
+          <div class="vk-section-body">
+            <div
+              class="vk-description-content vk-message-html"
+              v-html="sanitizeHtml(firstReporterMessage.content)"
+            />
+            <div
+              v-if="firstReporterMessage.attachments && firstReporterMessage.attachments.length > 0"
+              class="vk-attachments"
+            >
+              <a
+                v-for="att in firstReporterMessage.attachments"
+                :key="att.id"
+                :href="att.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="vk-attachment"
+              >
+                &#128206; <span>{{ att.original_filename }}</span>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Comments card -->
+        <div class="vk-section-card">
+          <div class="vk-section-header">
+            <span class="vk-section-header-icon">&#128172;</span>
+            <h2>Comments</h2>
+          </div>
+
+          <!-- Compose area -->
+          <div class="vk-compose">
+            <form class="vk-stack" @submit.prevent="submitReply">
+              <textarea
+                v-model="content"
+                class="vk-textarea"
+                placeholder="Write your reply..."
+              />
+
+              <div class="vk-compose-row">
+                <!-- File input -->
+                <div class="vk-compose-files">
+                  <label class="vk-browse-btn">
+                    &#128206; Browse files
+                    <input
+                      type="file"
+                      multiple
+                      @change="onFileChange"
+                    />
+                  </label>
+                  <span
+                    v-for="(file, i) in files"
+                    :key="`${file.name}-${i}`"
+                    class="vk-file-chip"
+                  >
+                    &#128206;
+                    <span class="vk-file-chip-name">{{ file.name }}</span>
+                    <button
+                      type="button"
+                      :aria-label="`Remove ${file.name}`"
+                      @click="removeFile(i)"
+                    >
+                      &#10005;
+                    </button>
+                  </span>
+                </div>
+
+                <!-- Send -->
+                <button
+                  class="vk-button primary"
+                  :disabled="isSending"
+                  type="submit"
+                >
+                  <template v-if="isSending">
+                    <span class="vk-spinner" />
+                    Sending...
+                  </template>
+                  <template v-else>Send</template>
+                </button>
+              </div>
+            </form>
+          </div>
+
+          <!-- Message list -->
+          <div v-if="sortedMessages.length === 0" class="vk-empty-state">
+            <div class="vk-empty-icon">&#128172;</div>
+            <p class="vk-empty-text">
+              No messages yet. Be the first to reply!
+            </p>
+          </div>
+          <div v-else class="vk-message-list">
+            <div v-for="(message, index) in sortedMessages" :key="message.id">
+              <hr v-if="index > 0" class="vk-message-divider" />
+
+              <!-- System message -->
+              <div v-if="message.author_type === 'system'" class="vk-message">
+                <div class="vk-avatar vk-avatar-system" aria-hidden="true">S</div>
+                <div class="vk-message-content">
+                  <div class="vk-message-meta">
+                    <span class="vk-author-name system">System</span>
+                    <span class="vk-message-time">{{ formatDate(message.created_at) }}</span>
+                  </div>
+                  <p class="vk-system-text">{{ stripHtml(message.content) }}</p>
+                </div>
+              </div>
+
+              <!-- Reporter / Support message -->
+              <div v-else class="vk-message">
+                <div
+                  :class="cn('vk-avatar', `vk-avatar-${message.author_type}`)"
+                  aria-hidden="true"
+                >
+                  {{ (AUTHOR_LABELS[message.author_type] || '?')[0] }}
+                </div>
+                <div class="vk-message-content">
+                  <div class="vk-message-meta">
+                    <span class="vk-author-name">
+                      {{ AUTHOR_LABELS[message.author_type] || message.author_type }}
+                    </span>
+                    <span class="vk-message-time">{{ formatDate(message.created_at) }}</span>
+                  </div>
+                  <div
+                    :class="cn('vk-message-bubble', message.author_type === 'user' && 'support')"
+                  >
+                    <div
+                      class="vk-message-html"
+                      v-html="sanitizeHtml(message.content)"
+                    />
+                  </div>
+                  <div
+                    v-if="message.attachments && message.attachments.length > 0"
+                    class="vk-attachments"
+                  >
+                    <a
+                      v-for="attachment in message.attachments"
+                      :key="attachment.id"
+                      class="vk-attachment"
+                      :href="attachment.url"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      &#128206; <span>{{ attachment.original_filename }}</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="~/assets/css/vicket.css"></style>

package/templates/nuxt/server/api/vicket/[...path].ts

@@ -0,0 +1,85 @@
+import { defineEventHandler, getQuery, readBody, readMultipartFormData, getMethod } from "h3";
+
+export default defineEventHandler(async (event) => {
+  const apiUrl = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+  const apiKey = process.env.VICKET_API_KEY || "";
+
+  if (!apiUrl || !apiKey) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Missing VICKET_API_URL or VICKET_API_KEY environment variable.",
+    });
+  }
+
+  const path = event.context.params?.path || "";
+  const method = getMethod(event);
+  const query = getQuery(event);
+
+  // Build target URL with query params
+  const queryString = new URLSearchParams(
+    Object.entries(query).reduce<Record<string, string>>((acc, [k, v]) => {
+      if (v !== undefined && v !== null) acc[k] = String(v);
+      return acc;
+    }, {}),
+  ).toString();
+  const targetUrl = `${apiUrl}/public/support/${path}${queryString ? `?${queryString}` : ""}`;
+
+  // Determine content type from the incoming request
+  const contentType = event.node.req.headers["content-type"] || "";
+  const isMultipart = contentType.includes("multipart/form-data");
+
+  let fetchOptions: RequestInit;
+
+  if (method === "GET" || method === "HEAD") {
+    fetchOptions = {
+      method,
+      headers: {
+        "X-Api-Key": apiKey,
+        "Content-Type": "application/json",
+      },
+    };
+  } else if (isMultipart) {
+    // Read raw multipart form data and rebuild a FormData for the upstream request
+    const parts = await readMultipartFormData(event);
+    const formData = new FormData();
+
+    if (parts) {
+      for (const part of parts) {
+        if (part.filename) {
+          const blob = new Blob([part.data], { type: part.type || "application/octet-stream" });
+          formData.append(part.name || "file", blob, part.filename);
+        } else {
+          formData.append(part.name || "field", part.data.toString("utf-8"));
+        }
+      }
+    }
+
+    fetchOptions = {
+      method,
+      headers: {
+        "X-Api-Key": apiKey,
+        // Do NOT set Content-Type for FormData — fetch sets it with boundary automatically
+      },
+      body: formData,
+    };
+  } else {
+    // JSON body
+    const body = await readBody(event);
+    fetchOptions = {
+      method,
+      headers: {
+        "X-Api-Key": apiKey,
+        "Content-Type": "application/json",
+      },
+      body: body ? JSON.stringify(body) : undefined,
+    };
+  }
+
+  const response = await fetch(targetUrl, fetchOptions);
+  const data = await response.json();
+
+  // Preserve the upstream status code
+  event.node.res.statusCode = response.status;
+
+  return data;
+});