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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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 });
|
||||
}
|
||||
@@ -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 }
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user