Deferred backlog: attachments, canned responses, tags, search, notifications, password change

Attachments: file storage on the same data volume, serving route with dual auth (session or portal/widget token, internal-note attachments never token-servable), inbound ingestion from email (mailparser) and Telegram (photo/document handlers), outbound delivery via SMTP attachments and Telegram sendDocument/sendPhoto, upload UI (paperclip + pending-file chip) on all three reply surfaces. Extracted lib/tickets/delivery.ts so the text-only and attachment-upload admin routes share one channel-delivery code path instead of duplicating it. Canned responses: CRUD + a popover picker in the reply box that inserts a saved template into the draft. Tags: fixed 6-color palette reusing existing soft-badge tokens, a picker on the ticket page, colored chips + a filter row on the dashboard. Search: LIKE-based (not FTS5 — simpler and sufficient at this volume) across ticket subject, customer name, and message bodies; a debounced search box on the dashboard. Desktop notifications: permission toggle + a background subscriber that fires for new tickets and customer messages while the tab is hidden, clicking one navigates to the ticket. Password change: new account settings page, verifies the current password before updating. Nav: gear-menu settings list now includes Шаблоны ответов/Теги/Аккаунт. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QcXH24ky6zjk2UyK5oZUPH
2026-07-26 17:32:12 +00:00
1 parent 7947633709
commit 89b9c5eaac
@@ -3,10 +3,12 @@
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
-import { ArrowLeft, Send, StickyNote } from "lucide-react";
+import { ArrowLeft, Send, StickyNote, Paperclip, X, MessageSquareText } from "lucide-react";
 import { useTicketEvents } from "@/lib/events/use-ticket-events";
 import { formatRelativeTime } from "@/lib/format";
 import { Avatar } from "@/components/avatar";
+import { AttachmentChip } from "@/components/attachment-chip";
+import { TagPicker } from "./tag-picker";
 import type { TicketDTO, MessageDTO, TicketStatus } from "@/lib/tickets/types";

 const STATUS_LABEL: Record<TicketStatus, string> = {
@@ -29,8 +31,32 @@ export function TicketThread({
  const [messages, setMessages] = useState(initialMessages);
  const [draft, setDraft] = useState("");
  const [visibility, setVisibility] = useState<"public" | "internal">("public");
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
  const [sending, setSending] = useState(false);
+  const [cannedResponses, setCannedResponses] = useState<{ id: string; title: string; body: string }[]>([]);
+  const [cannedOpen, setCannedOpen] = useState(false);
  const bottomRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const cannedRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetch("/api/canned-responses")
+      .then((res) => res.json())
+      .then((data) => setCannedResponses(data.responses ?? []));
+  }, []);
+
+  useEffect(() => {
+    function onClickOutside(e: MouseEvent) {
+      if (cannedRef.current && !cannedRef.current.contains(e.target as Node)) setCannedOpen(false);
+    }
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, []);
+
+  function insertCanned(body: string) {
+    setDraft((prev) => (prev.trim() ? `${prev}\n${body}` : body));
+    setCannedOpen(false);
+  }

  useTicketEvents("/api/events", (event) => {
    if (event.type === "ticket.updated" && event.ticket.id === ticket.id) {
@@ -46,15 +72,30 @@ export function TicketThread({
  }, [messages.length]);

  async function sendReply() {
-    if (!draft.trim()) return;
+    if (!draft.trim() && !pendingFile) return;
    setSending(true);
-    const res = await fetch(`/api/tickets/${ticket.id}/messages`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ body: draft, visibility }),
-    });
+
+    let res: Response;
+    if (pendingFile) {
+      const formData = new FormData();
+      formData.append("file", pendingFile);
+      formData.append("caption", draft);
+      formData.append("visibility", visibility);
+      res = await fetch(`/api/tickets/${ticket.id}/attachments`, { method: "POST", body: formData });
+    } else {
+      res = await fetch(`/api/tickets/${ticket.id}/messages`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ body: draft, visibility }),
+      });
+    }
+
    setSending(false);
-    if (res.ok) setDraft("");
+    if (res.ok) {
+      setDraft("");
+      setPendingFile(null);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
  }

  async function updateStatus(status: TicketStatus) {
@@ -90,10 +131,15 @@ export function TicketThread({
            Дашборд
          </Link>
          <h1 className="truncate font-display text-lg font-bold">{ticket.subject}</h1>
-          <span className="flex items-center gap-1.5">
+          <span className="mb-2 flex items-center gap-1.5">
            <Avatar name={ticket.customerName} size={18} />
            <span className="text-sm text-text-muted">{ticket.customerName}</span>
          </span>
+          <TagPicker
+            ticketId={ticket.id}
+            selectedTags={ticket.tags}
+            onChange={(tags) => setTicket((t) => ({ ...t, tags }))}
+          />
        </div>

        <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto">
@@ -153,7 +199,22 @@ export function TicketThread({
            Заметка для команды
          </button>
        </div>
+        {pendingFile && (
+          <div className="mb-1.5 flex items-center gap-2 rounded-md border border-border bg-surface-hover px-2.5 py-1.5 text-xs">
+            <Paperclip size={12} />
+            <span className="flex-1 truncate">{pendingFile.name}</span>
+            <button type="button" onClick={() => setPendingFile(null)} className="text-text-muted hover:text-text">
+              <X size={13} />
+            </button>
+          </div>
+        )}
        <div className="flex gap-2">
+          <input
+            ref={fileInputRef}
+            type="file"
+            className="hidden"
+            onChange={(e) => setPendingFile(e.target.files?.[0] ?? null)}
+          />
          <textarea
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
@@ -171,9 +232,45 @@ export function TicketThread({
                : "border-border bg-surface focus:border-accent"
            }`}
          />
+          <div ref={cannedRef} className="relative self-end">
+            <button
+              type="button"
+              onClick={() => setCannedOpen((v) => !v)}
+              className="btn btn-ghost"
+              title="Шаблоны ответов"
+            >
+              <MessageSquareText size={15} />
+            </button>
+            {cannedOpen && (
+              <div className="card absolute bottom-full right-0 z-20 mb-2 max-h-64 w-72 overflow-y-auto p-1">
+                {cannedResponses.length === 0 && (
+                  <p className="p-2 text-xs text-text-faint">Шаблонов пока нет</p>
+                )}
+                {cannedResponses.map((c) => (
+                  <button
+                    key={c.id}
+                    type="button"
+                    onClick={() => insertCanned(c.body)}
+                    className="block w-full rounded-md px-3 py-2 text-left text-sm hover:bg-surface-hover"
+                  >
+                    <p className="font-medium">{c.title}</p>
+                    <p className="truncate text-xs text-text-faint">{c.body}</p>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="btn btn-ghost self-end"
+            title="Прикрепить файл"
+          >
+            <Paperclip size={15} />
+          </button>
          <button
            onClick={sendReply}
-            disabled={sending || !draft.trim()}
+            disabled={sending || (!draft.trim() && !pendingFile)}
            className={visibility === "internal" ? "btn self-end bg-warning text-white hover:brightness-95" : "btn btn-primary self-end"}
          >
            {visibility === "internal" ? <StickyNote size={15} /> : <Send size={15} />}
@@ -208,6 +305,9 @@ function MessageBubble({ message }: { message: MessageDTO }) {
          Внутренняя заметка
        </p>
        <p className="mb-1 whitespace-pre-wrap text-sm">{message.body}</p>
+        {message.attachments.map((a) => (
+          <AttachmentChip key={a.id} attachment={a} />
+        ))}
        <p className="text-[11px] text-warning-soft-text/80">
          {message.authorName} · {formatRelativeTime(message.createdAt)}
        </p>
@@ -225,6 +325,9 @@ function MessageBubble({ message }: { message: MessageDTO }) {
    >
      <div className={`max-w-[75%] rounded-lg px-3 py-2 text-sm ${isAgent ? "bg-accent text-white" : "bg-surface-hover"}`}>
        <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
+        {message.attachments.map((a) => (
+          <AttachmentChip key={a.id} attachment={a} />
+        ))}
        <p className={`text-[11px] ${isAgent ? "text-white/70" : "text-text-faint"}`}>
          {message.authorName} · {formatRelativeTime(message.createdAt)}
        </p>