feat: two-way sync between support tickets and Gitea issues (v0.63.0)
Outbound (already existed one-way: ticket create -> Gitea issue) now also mirrors status changes: closing/reopening a ticket in the admin UI closes/reopens the linked Gitea issue, and replies posted from Epicure (by the ticket owner or an admin) post as a comment on the issue. Captures and stores the Gitea issue number at creation time to address these follow-up calls without re-parsing the issue URL. Inbound: new webhook receiver at /api/webhooks/gitea, verified via HMAC-SHA256 signature (X-Gitea-Signature) with a configurable GITEA_WEBHOOK_SECRET site setting, deduped by delivery id the same way the existing Stripe receiver dedupes events. Handles "issues" (closed/reopened -> ticket status) and "issue_comment" (created -> appends to the ticket's comment thread), skipping comments Epicura already posted itself (matched by Gitea comment id) to avoid loops. New support_ticket_comments table backs a lightweight conversation thread on both the user-facing support page and the admin support manager, each comment tagged by author (user/admin/gitea). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
@@ -4,9 +4,10 @@ import { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
import { ExternalLink, FileText } from "lucide-react";
|
||||
import { ExternalLink, FileText, MessageSquare } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -19,6 +20,10 @@ type TicketStatus = "open" | "triaged" | "closed";
|
||||
|
||||
type Attachment = { id: string; contentType: string; url: string };
|
||||
|
||||
type Comment = { id: string; authorType: "user" | "admin" | "gitea"; body: string; createdAt: string };
|
||||
|
||||
const AUTHOR_LABEL: Record<Comment["authorType"], string> = { user: "User", admin: "Admin", gitea: "Gitea" };
|
||||
|
||||
type Ticket = {
|
||||
id: string;
|
||||
userEmail: string;
|
||||
@@ -55,6 +60,51 @@ const statusVariant: Record<TicketStatus, "default" | "secondary" | "outline"> =
|
||||
export function AdminSupportManager({ initialTickets }: { initialTickets: Ticket[] }) {
|
||||
const [tickets, setTickets] = useState<Ticket[]>(initialTickets);
|
||||
const [retrying, setRetrying] = useState<string | null>(null);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [comments, setComments] = useState<Record<string, Comment[]>>({});
|
||||
const [commentDraft, setCommentDraft] = useState("");
|
||||
const [sendingComment, setSendingComment] = useState(false);
|
||||
|
||||
async function toggleConversation(ticketId: string) {
|
||||
if (expandedId === ticketId) {
|
||||
setExpandedId(null);
|
||||
return;
|
||||
}
|
||||
setExpandedId(ticketId);
|
||||
setCommentDraft("");
|
||||
if (!comments[ticketId]) {
|
||||
try {
|
||||
const res = await fetch(`/api/v1/admin/support/${ticketId}/comments`);
|
||||
if (res.ok) {
|
||||
const data = (await res.json()) as Comment[];
|
||||
setComments((prev) => ({ ...prev, [ticketId]: data }));
|
||||
}
|
||||
} catch {
|
||||
// leave the section empty — the send box below still works
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function sendComment(ticketId: string) {
|
||||
const body = commentDraft.trim();
|
||||
if (!body) return;
|
||||
setSendingComment(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/admin/support/${ticketId}/comments`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ body }),
|
||||
});
|
||||
if (!res.ok) throw new Error();
|
||||
const comment = (await res.json()) as Comment;
|
||||
setComments((prev) => ({ ...prev, [ticketId]: [...(prev[ticketId] ?? []), comment] }));
|
||||
setCommentDraft("");
|
||||
} catch {
|
||||
toast.error("Failed to send comment");
|
||||
} finally {
|
||||
setSendingComment(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStatusChange(id: string, status: TicketStatus) {
|
||||
try {
|
||||
@@ -172,7 +222,50 @@ export function AdminSupportManager({ initialTickets }: { initialTickets: Ticket
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { void toggleConversation(ticket.id); }}
|
||||
className="flex items-center gap-1 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
Conversation
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{expandedId === ticket.id && (
|
||||
<div className="mt-2 space-y-2 rounded-md border bg-muted/30 p-3">
|
||||
{(comments[ticket.id] ?? []).length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">No comments yet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{(comments[ticket.id] ?? []).map((c) => (
|
||||
<div key={c.id} className="text-sm">
|
||||
<span className="text-xs font-medium text-muted-foreground">{AUTHOR_LABEL[c.authorType]}</span>
|
||||
<p className="whitespace-pre-wrap">{c.body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2 pt-1">
|
||||
<Textarea
|
||||
value={commentDraft}
|
||||
onChange={(e) => setCommentDraft(e.target.value)}
|
||||
placeholder="Reply to this ticket…"
|
||||
maxLength={3000}
|
||||
rows={2}
|
||||
className="text-sm"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
disabled={sendingComment || !commentDraft.trim()}
|
||||
onClick={() => { void sendComment(ticket.id); }}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { toast } from "sonner";
|
||||
import { ExternalLink, Paperclip, X, FileText } from "lucide-react";
|
||||
import { ExternalLink, Paperclip, X, FileText, MessageSquare } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -25,6 +25,8 @@ type TicketStatus = "open" | "triaged" | "closed";
|
||||
|
||||
type Attachment = { id: string; contentType: string; url: string };
|
||||
|
||||
type Comment = { id: string; authorType: "user" | "admin" | "gitea"; body: string; createdAt: string };
|
||||
|
||||
type Ticket = {
|
||||
id: string;
|
||||
type: TicketType;
|
||||
@@ -76,6 +78,51 @@ export function SupportManager({
|
||||
const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
|
||||
const [uploadingCount, setUploadingCount] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [comments, setComments] = useState<Record<string, Comment[]>>({});
|
||||
const [commentDraft, setCommentDraft] = useState("");
|
||||
const [sendingComment, setSendingComment] = useState(false);
|
||||
|
||||
async function toggleConversation(ticketId: string) {
|
||||
if (expandedId === ticketId) {
|
||||
setExpandedId(null);
|
||||
return;
|
||||
}
|
||||
setExpandedId(ticketId);
|
||||
setCommentDraft("");
|
||||
if (!comments[ticketId]) {
|
||||
try {
|
||||
const res = await fetch(`/api/v1/support/${ticketId}/comments`);
|
||||
if (res.ok) {
|
||||
const data = (await res.json()) as Comment[];
|
||||
setComments((prev) => ({ ...prev, [ticketId]: data }));
|
||||
}
|
||||
} catch {
|
||||
// leave the section empty — the send box below still works
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function sendComment(ticketId: string) {
|
||||
const body = commentDraft.trim();
|
||||
if (!body) return;
|
||||
setSendingComment(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/support/${ticketId}/comments`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ body }),
|
||||
});
|
||||
if (!res.ok) throw new Error();
|
||||
const comment = (await res.json()) as Comment;
|
||||
setComments((prev) => ({ ...prev, [ticketId]: [...(prev[ticketId] ?? []), comment] }));
|
||||
setCommentDraft("");
|
||||
} catch {
|
||||
toast.error(t("commentSendFailed"));
|
||||
} finally {
|
||||
setSendingComment(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFiles(files: FileList) {
|
||||
const room = MAX_ATTACHMENTS - pendingAttachments.length;
|
||||
@@ -315,7 +362,52 @@ export function SupportManager({
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Link>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { void toggleConversation(ticket.id); }}
|
||||
className="flex items-center gap-1 hover:text-foreground"
|
||||
>
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
{t("conversation")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{expandedId === ticket.id && (
|
||||
<div className="mt-2 space-y-2 rounded-md border bg-muted/30 p-3">
|
||||
{(comments[ticket.id] ?? []).length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">{t("noComments")}</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{(comments[ticket.id] ?? []).map((c) => (
|
||||
<div key={c.id} className="text-sm">
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
{t(`commentAuthor.${c.authorType}`)}
|
||||
</span>
|
||||
<p className="whitespace-pre-wrap">{c.body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2 pt-1">
|
||||
<Textarea
|
||||
value={commentDraft}
|
||||
onChange={(e) => setCommentDraft(e.target.value)}
|
||||
placeholder={t("commentPlaceholder")}
|
||||
maxLength={3000}
|
||||
rows={2}
|
||||
className="text-sm"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
disabled={sendingComment || !commentDraft.trim()}
|
||||
onClick={() => { void sendComment(ticket.id); }}
|
||||
>
|
||||
{t("commentSend")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user