feat: file/screenshot attachments on support tickets (v0.49.1)

Support form now accepts up to 5 attachments (images, PDF, text, JSON,
zip; 10MB each) via the existing S3/MinIO presigned-upload flow. New
support_ticket_attachments table; attachment links get folded into the
Gitea issue body and shown as thumbnails in both the user's ticket
history and the admin support view.

New presign endpoint (/api/v1/support/attachments/presign, rate-limited
20/hr) scoped to the uploading user rather than a ticket id, since the
ticket doesn't exist yet at upload time.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
2026-07-18 12:09:40 +02:00
parent 811d4cad42
commit 12c2ec213a
19 changed files with 5855 additions and 64 deletions
+11 -5
View File
@@ -4,6 +4,7 @@ import { auth } from "@/lib/auth/server";
import { db, supportTickets, eq, desc } from "@epicure/db";
import { SupportManager } from "@/components/support/support-manager";
import { getMessages } from "@/lib/i18n/server";
import { getPublicUrl } from "@/lib/storage";
export const metadata: Metadata = {};
@@ -12,11 +13,11 @@ export default async function SupportPage() {
if (!session) return null;
const m = getMessages((session.user as { locale?: string }).locale);
const rows = await db
.select()
.from(supportTickets)
.where(eq(supportTickets.userId, session.user.id))
.orderBy(desc(supportTickets.createdAt));
const rows = await db.query.supportTickets.findMany({
where: eq(supportTickets.userId, session.user.id),
orderBy: desc(supportTickets.createdAt),
with: { attachments: true },
});
return (
<div className="space-y-8 max-w-3xl">
@@ -33,6 +34,11 @@ export default async function SupportPage() {
status: r.status,
giteaIssueUrl: r.giteaIssueUrl,
createdAt: r.createdAt.toISOString(),
attachments: r.attachments.map((a) => ({
id: a.id,
contentType: a.contentType,
url: getPublicUrl(a.storageKey),
})),
}))}
/>
</div>
+26 -18
View File
@@ -1,26 +1,18 @@
import type { Metadata } from "next";
import { db, users, supportTickets, eq, desc } from "@epicure/db";
import { db, supportTickets, desc } from "@epicure/db";
import { AdminSupportManager } from "@/components/admin/admin-support-manager";
import { getPublicUrl } from "@/lib/storage";
export const metadata: Metadata = {};
export default async function AdminSupportPage() {
const rows = await db
.select({
id: supportTickets.id,
userEmail: users.email,
username: users.username,
type: supportTickets.type,
title: supportTickets.title,
description: supportTickets.description,
status: supportTickets.status,
giteaIssueUrl: supportTickets.giteaIssueUrl,
giteaError: supportTickets.giteaError,
createdAt: supportTickets.createdAt,
})
.from(supportTickets)
.innerJoin(users, eq(supportTickets.userId, users.id))
.orderBy(desc(supportTickets.createdAt));
const rows = await db.query.supportTickets.findMany({
orderBy: desc(supportTickets.createdAt),
with: {
attachments: true,
user: { columns: { email: true, username: true } },
},
});
return (
<div className="space-y-6">
@@ -31,7 +23,23 @@ export default async function AdminSupportPage() {
</p>
</div>
<AdminSupportManager
initialTickets={rows.map((r) => ({ ...r, createdAt: r.createdAt.toISOString() }))}
initialTickets={rows.map((r) => ({
id: r.id,
userEmail: r.user.email,
username: r.user.username,
type: r.type,
title: r.title,
description: r.description,
status: r.status,
giteaIssueUrl: r.giteaIssueUrl,
giteaError: r.giteaError,
createdAt: r.createdAt.toISOString(),
attachments: r.attachments.map((a) => ({
id: a.id,
contentType: a.contentType,
url: getPublicUrl(a.storageKey),
})),
}))}
/>
</div>
);
+26 -20
View File
@@ -1,29 +1,35 @@
import { NextResponse } from "next/server";
import { db, users, supportTickets, eq, desc } from "@epicure/db";
import { db, supportTickets, desc } from "@epicure/db";
import { requireAdmin } from "@/lib/api-auth";
import { getPublicUrl } from "@/lib/storage";
export async function GET() {
const { response } = await requireAdmin();
if (response) return response;
const rows = await db
.select({
id: supportTickets.id,
userId: supportTickets.userId,
userEmail: users.email,
username: users.username,
type: supportTickets.type,
title: supportTickets.title,
description: supportTickets.description,
status: supportTickets.status,
giteaIssueUrl: supportTickets.giteaIssueUrl,
giteaError: supportTickets.giteaError,
createdAt: supportTickets.createdAt,
updatedAt: supportTickets.updatedAt,
})
.from(supportTickets)
.innerJoin(users, eq(supportTickets.userId, users.id))
.orderBy(desc(supportTickets.createdAt));
const rows = await db.query.supportTickets.findMany({
orderBy: desc(supportTickets.createdAt),
with: {
attachments: true,
user: { columns: { email: true, username: true } },
},
});
return NextResponse.json(rows);
return NextResponse.json(
rows.map((r) => ({
id: r.id,
userId: r.userId,
userEmail: r.user.email,
username: r.user.username,
type: r.type,
title: r.title,
description: r.description,
status: r.status,
giteaIssueUrl: r.giteaIssueUrl,
giteaError: r.giteaError,
createdAt: r.createdAt,
updatedAt: r.updatedAt,
attachments: r.attachments.map((a) => ({ ...a, url: getPublicUrl(a.storageKey) })),
}))
);
}
@@ -0,0 +1,48 @@
import { NextRequest, NextResponse } from "next/server";
import crypto from "node:crypto";
import { z } from "zod";
import { requireSession } from "@/lib/api-auth";
import { createPresignedUploadPost } from "@/lib/storage";
import { applyRateLimit } from "@/lib/rate-limit";
const ALLOWED_TYPES = [
"image/jpeg",
"image/png",
"image/webp",
"image/avif",
"image/gif",
"application/pdf",
"text/plain",
"application/json",
"application/zip",
] as const;
type AllowedType = (typeof ALLOWED_TYPES)[number];
const MAX_FILE_SIZE = 10 * 1024 * 1024;
const Schema = z.object({
contentType: z.string().refine((t): t is AllowedType => (ALLOWED_TYPES as readonly string[]).includes(t), {
message: "Unsupported file type",
}),
fileSize: z.number().int().positive().max(MAX_FILE_SIZE, "File exceeds 10MB limit"),
});
export async function POST(req: NextRequest) {
const { session, response } = await requireSession();
if (response) return response;
const rateLimitResponse = await applyRateLimit(`rl:support-attachment:${session!.user.id}`, 20, 3600);
if (rateLimitResponse) return rateLimitResponse;
const body = (await req.json()) as unknown;
const parsed = Schema.safeParse(body);
if (!parsed.success) {
return NextResponse.json({ error: "Validation error", issues: parsed.error.issues }, { status: 400 });
}
const { contentType, fileSize } = parsed.data;
const ext = contentType.split("/")[1] ?? "bin";
const key = `support/${session!.user.id}/${crypto.randomUUID()}.${ext}`;
const { url, fields } = await createPresignedUploadPost(key, contentType, MAX_FILE_SIZE);
return NextResponse.json({ url, fields, key, contentType, fileSize });
}
+59 -9
View File
@@ -1,28 +1,44 @@
import { NextRequest, NextResponse } from "next/server";
import crypto from "node:crypto";
import { z } from "zod";
import { db, supportTickets, eq, desc } from "@epicure/db";
import { db, supportTickets, supportTicketAttachments, eq, desc } from "@epicure/db";
import { requireSession } from "@/lib/api-auth";
import { sendEmail, supportTicketReceivedHtml } from "@/lib/email";
import { createGiteaIssue } from "@/lib/gitea";
import { getPublicUrl, isOwnedSupportAttachmentKey } from "@/lib/storage";
const MAX_ATTACHMENTS = 5;
const CreateTicketBody = z.object({
type: z.enum(["bug", "suggestion", "question"]),
title: z.string().trim().min(3).max(200),
description: z.string().trim().min(10).max(5000),
attachments: z
.array(z.object({
key: z.string().min(1).max(500),
contentType: z.string().min(1).max(100),
sizeBytes: z.number().int().positive(),
}))
.max(MAX_ATTACHMENTS)
.default([]),
});
export async function GET() {
const { session, response } = await requireSession();
if (response) return response;
const rows = await db
.select()
.from(supportTickets)
.where(eq(supportTickets.userId, session!.user.id))
.orderBy(desc(supportTickets.createdAt));
const rows = await db.query.supportTickets.findMany({
where: eq(supportTickets.userId, session!.user.id),
orderBy: desc(supportTickets.createdAt),
with: { attachments: true },
});
return NextResponse.json(rows);
return NextResponse.json(
rows.map((r) => ({
...r,
attachments: r.attachments.map((a) => ({ ...a, url: getPublicUrl(a.storageKey) })),
}))
);
}
export async function POST(req: NextRequest) {
@@ -38,14 +54,28 @@ export async function POST(req: NextRequest) {
);
}
const { type, title, description } = parsed.data;
const { type, title, description, attachments } = parsed.data;
for (const a of attachments) {
if (!isOwnedSupportAttachmentKey(a.key, session!.user.id)) {
return NextResponse.json({ error: "Invalid attachment" }, { status: 400 });
}
}
const id = crypto.randomUUID();
const now = new Date();
const attachmentLinks = attachments.map((a) => getPublicUrl(a.key));
const giteaBody = [
description,
attachmentLinks.length > 0 ? `\n**Attachments:**\n${attachmentLinks.map((u) => `- ${u}`).join("\n")}` : "",
`\n---\nReported via Epicure support form by user \`${session!.user.id}\`.`,
].join("\n");
const { url: giteaIssueUrl, error: giteaError } = await createGiteaIssue({
type,
title,
body: `${description}\n\n---\nReported via Epicure support form by user \`${session!.user.id}\`.`,
body: giteaBody,
});
await db.insert(supportTickets).values({
@@ -61,6 +91,19 @@ export async function POST(req: NextRequest) {
updatedAt: now,
});
if (attachments.length > 0) {
await db.insert(supportTicketAttachments).values(
attachments.map((a) => ({
id: crypto.randomUUID(),
ticketId: id,
storageKey: a.key,
contentType: a.contentType,
sizeBytes: a.sizeBytes,
createdAt: now,
}))
);
}
const baseUrl = process.env["BETTER_AUTH_URL"] ?? "http://localhost:3000";
const ticketUrl = `${baseUrl}/support`;
if (session!.user.email) {
@@ -87,6 +130,13 @@ export async function POST(req: NextRequest) {
giteaError,
createdAt: now.toISOString(),
updatedAt: now.toISOString(),
attachments: attachments.map((a) => ({
id: "",
storageKey: a.key,
contentType: a.contentType,
sizeBytes: a.sizeBytes,
url: getPublicUrl(a.key),
})),
},
{ status: 201 }
);