@nexttylabs/echo 0.2.0

package/components/feedback/feedback-stats.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useEffect, useState } from "react";
+
+interface StatCardProps {
+  title: string;
+  value: number;
+  colorClass: string;
+}
+
+function StatCard({ title, value, colorClass }: StatCardProps) {
+  return (
+    <div className={`p-4 rounded-lg border ${colorClass}`}>
+      <p className="text-sm text-muted-foreground">{title}</p>
+      <p className="text-2xl font-bold mt-1">{value}</p>
+    </div>
+  );
+}
+
+interface FeedbackStatsProps {
+  organizationId: string;
+}
+
+interface FeedbackItem {
+  status: string;
+  type: string;
+}
+
+export function FeedbackStats({ organizationId }: FeedbackStatsProps) {
+  const [stats, setStats] = useState<{
+    total: number;
+    byStatus: Record<string, number>;
+    byType: Record<string, number>;
+  } | null>(null);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const params = new URLSearchParams({
+          organizationId,
+          pageSize: "100",
+        });
+
+        const response = await fetch(`/api/feedback?${params}`);
+        if (response.ok) {
+          const result = await response.json();
+          const byStatus: Record<string, number> = {};
+          const byType: Record<string, number> = {};
+
+          result.data.forEach((f: FeedbackItem) => {
+            byStatus[f.status] = (byStatus[f.status] || 0) + 1;
+            byType[f.type] = (byType[f.type] || 0) + 1;
+          });
+
+          setStats({
+            total: result.total,
+            byStatus,
+            byType,
+          });
+        }
+      } catch (error) {
+        console.error("Failed to fetch stats:", error);
+      }
+    };
+
+    fetchStats();
+  }, [organizationId]);
+
+  if (!stats) {
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {[1, 2, 3, 4].map((i) => (
+          <div
+            key={i}
+            className="p-4 rounded-lg border animate-pulse bg-muted h-20"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <StatCard
+        title="总反馈数"
+        value={stats.total}
+        colorClass="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950"
+      />
+      <StatCard
+        title="新接收"
+        value={stats.byStatus["new"] || 0}
+        colorClass="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950"
+      />
+      <StatCard
+        title="处理中"
+        value={stats.byStatus["in-progress"] || 0}
+        colorClass="border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950"
+      />
+      <StatCard
+        title="Bug"
+        value={stats.byType["bug"] || 0}
+        colorClass="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950"
+      />
+    </div>
+  );
+}

package/components/feedback/file-upload.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { Upload, File as FileIcon, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type UploadStatus = "pending" | "uploading" | "success" | "error";
+
+interface UploadedFile {
+  file: File;
+  preview?: string;
+  status: UploadStatus;
+  attachmentId?: number;
+}
+
+interface FileUploadProps {
+  feedbackId?: number;
+  onFilesSelected?: (count: number) => void;
+  onUploaded?: (ids: number[]) => void;
+  maxSize?: number;
+  accept?: string;
+}
+
+export function FileUpload({
+  feedbackId,
+  onFilesSelected,
+  onUploaded,
+  maxSize = 5 * 1024 * 1024,
+  accept = "image/png,image/jpeg,image/gif,application/pdf",
+}: FileUploadProps) {
+  const t = useTranslations("feedback.fileUpload");
+  const [files, setFiles] = useState<UploadedFile[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const allowedTypes = useMemo(() => accept.split(","), [accept]);
+  const maxSizeMb = useMemo(() => Math.round(maxSize / 1024 / 1024), [maxSize]);
+
+  const notifySelection = useCallback(
+    (nextFiles: UploadedFile[]) => {
+      onFilesSelected?.(nextFiles.length);
+    },
+    [onFilesSelected],
+  );
+
+  const validateFile = useCallback(
+    (file: File): string | null => {
+      if (file.size > maxSize) {
+        return t("errors.size", { maxMb: maxSizeMb });
+      }
+      if (!allowedTypes.includes(file.type)) {
+        return t("errors.type");
+      }
+      return null;
+    },
+    [allowedTypes, maxSize, maxSizeMb, t],
+  );
+
+  const handleFiles = useCallback(
+    (newFiles: File[]) => {
+      const validFiles: UploadedFile[] = [];
+
+      for (const file of newFiles) {
+        const error = validateFile(file);
+        if (error) {
+          alert(error);
+          continue;
+        }
+
+        const preview = file.type.startsWith("image/")
+          ? URL.createObjectURL(file)
+          : undefined;
+
+        validFiles.push({ file, preview, status: "pending" });
+      }
+
+      setFiles((prev) => {
+        const nextFiles = [...prev, ...validFiles];
+        notifySelection(nextFiles);
+        return nextFiles;
+      });
+    },
+    [notifySelection, validateFile],
+  );
+
+  useEffect(() => {
+    return () => {
+      files.forEach((file) => {
+        if (file.preview) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
+  }, [files]);
+
+  const uploadFiles = async () => {
+    if (!feedbackId) {
+      alert(t("errors.missingFeedbackId"));
+      return;
+    }
+
+    const pending = files.filter((file) => file.status === "pending");
+
+    for (const fileItem of pending) {
+      setFiles((prev) =>
+        prev.map((item) =>
+          item === fileItem ? { ...item, status: "uploading" } : item,
+        ),
+      );
+
+      try {
+        const formData = new FormData();
+        formData.append("files", fileItem.file);
+        formData.append("feedbackId", String(feedbackId));
+
+        const response = await fetch("/api/upload", {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!response.ok) {
+          setFiles((prev) =>
+            prev.map((item) =>
+              item === fileItem ? { ...item, status: "error" } : item,
+            ),
+          );
+          continue;
+        }
+
+        const result = await response.json();
+        const attachmentId = result.data?.[0]?.attachmentId as number | undefined;
+
+        setFiles((prev) =>
+          prev.map((item) =>
+            item === fileItem
+              ? { ...item, status: "success", attachmentId }
+              : item,
+          ),
+        );
+      } catch {
+        setFiles((prev) =>
+          prev.map((item) =>
+            item === fileItem ? { ...item, status: "error" } : item,
+          ),
+        );
+      }
+    }
+
+    const uploadedIds = files
+      .filter((file) => file.attachmentId !== undefined)
+      .map((file) => file.attachmentId as number);
+
+    onUploaded?.(uploadedIds);
+  };
+
+  const removeFile = (fileItem: UploadedFile) => {
+    setFiles((prev) => {
+      const nextFiles = prev.filter((file) => file !== fileItem);
+      notifySelection(nextFiles);
+      return nextFiles;
+    });
+    if (fileItem.preview) {
+      URL.revokeObjectURL(fileItem.preview);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div
+        onDragOver={(event) => {
+          event.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={(event) => {
+          event.preventDefault();
+          setIsDragging(false);
+          handleFiles(Array.from(event.dataTransfer.files));
+        }}
+        className={cn(
+          "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
+          isDragging
+            ? "border-primary bg-primary/5"
+            : "border-muted-foreground/25 hover:border-muted-foreground/50",
+        )}
+      >
+        <input
+          id="file-upload"
+          type="file"
+          multiple
+          accept={accept}
+          onChange={(event) =>
+            handleFiles(Array.from(event.target.files ?? []))
+          }
+          className="hidden"
+        />
+        <label htmlFor="file-upload" className="cursor-pointer">
+          <Upload className="mx-auto h-10 w-10 text-muted-foreground mb-2" />
+          <p className="text-sm text-muted-foreground">
+            {t("dropzone.title")}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1">
+            {t("dropzone.subtitle", { maxMb: maxSizeMb })}
+          </p>
+        </label>
+      </div>
+
+      {files.length > 0 && (
+        <div className="space-y-2">
+          {files.map((fileItem) => (
+            <div
+              key={`${fileItem.file.name}-${fileItem.file.size}`}
+              className="flex items-center gap-3 p-3 border rounded-lg"
+            >
+              {fileItem.preview ? (
+                <Image
+                  src={fileItem.preview}
+                  alt={fileItem.file.name}
+                  width={48}
+                  height={48}
+                  unoptimized
+                  className="w-12 h-12 object-cover rounded"
+                />
+              ) : (
+                <div className="w-12 h-12 bg-muted rounded flex items-center justify-center">
+                  <FileIcon className="w-6 h-6 text-muted-foreground" />
+                </div>
+              )}
+
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium truncate">
+                  {fileItem.file.name}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {(fileItem.file.size / 1024).toFixed(1)} KB
+                </p>
+              </div>
+
+              <div className="text-xs">
+                {fileItem.status === "pending" && t("status.pending")}
+                {fileItem.status === "uploading" && t("status.uploading")}
+                {fileItem.status === "success" && t("status.success")}
+                {fileItem.status === "error" && t("status.error")}
+              </div>
+
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => removeFile(fileItem)}
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+          ))}
+
+          <Button
+            type="button"
+            onClick={uploadFiles}
+            disabled={!feedbackId || files.every((file) => file.status !== "pending")}
+            className="w-full"
+          >
+            {t("buttons.upload")}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/feedback/processing-status.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useEffect, useState, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Loader2, CheckCircle2, XCircle, RefreshCw, Bot } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+interface ProcessingResult {
+  classification?: {
+    type: string;
+    priority: string;
+    confidence: number;
+    reasons: string[];
+  };
+  tagSuggestions?: Array<{
+    name: string;
+    slug: string;
+    confidence: number;
+  }>;
+  duplicateCandidates?: Array<{
+    feedbackId: number;
+    similarity: number;
+  }>;
+  processingTime?: number;
+  status: string;
+  errorMessage?: string;
+}
+
+interface ProcessingStatusProps {
+  feedbackId: number;
+  onCompleted?: (result: ProcessingResult) => void;
+}
+
+export default function ProcessingStatus({
+  feedbackId,
+  onCompleted,
+}: ProcessingStatusProps) {
+  const t = useTranslations("processing");
+  const [status, setStatus] = useState<"pending" | "processing" | "completed" | "failed">("pending");
+  const [result, setResult] = useState<ProcessingResult | null>(null);
+  const [isRetrying, setIsRetrying] = useState(false);
+
+  const checkStatus = useCallback(async () => {
+    try {
+      const response = await fetch(
+        `/api/feedback/${feedbackId}/processing-status`,
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setStatus(data.status);
+
+        if (data.status === "completed" && data.result) {
+          setResult(data.result);
+          onCompleted?.(data.result);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to check processing status:", error);
+    }
+  }, [feedbackId, onCompleted]);
+
+  useEffect(() => {
+    if (status !== "completed" && status !== "failed") {
+      const interval = setInterval(checkStatus, 2000);
+      checkStatus();
+      return () => clearInterval(interval);
+    }
+  }, [status, checkStatus]);
+
+  async function retry() {
+    setIsRetrying(true);
+    try {
+      const response = await fetch(
+        `/api/feedback/${feedbackId}/processing-status`,
+        { method: "POST" },
+      );
+      if (response.ok) {
+        setStatus("pending");
+        setResult(null);
+      }
+    } finally {
+      setIsRetrying(false);
+    }
+  }
+
+  if (status === "pending") {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        <span>{t("queued")}</span>
+      </div>
+    );
+  }
+
+  if (status === "processing") {
+    return (
+      <div className="flex items-center gap-2 text-sm text-primary">
+        <Bot className="h-4 w-4 animate-pulse" />
+        <Loader2 className="h-4 w-4 animate-spin" />
+        <span>{t("inProgress")}</span>
+      </div>
+    );
+  }
+
+  if (status === "completed") {
+    return (
+      <div className="flex items-center gap-2 text-sm text-green-600">
+        <CheckCircle2 className="h-4 w-4" />
+        <span>{t("completed")}</span>
+        {result?.processingTime && (
+          <span className="text-muted-foreground">
+            ({result.processingTime}ms)
+          </span>
+        )}
+      </div>
+    );
+  }
+
+  if (status === "failed") {
+    return (
+      <div className="flex items-center gap-2 text-sm text-destructive">
+        <XCircle className="h-4 w-4" />
+        <span>{t("failed")}</span>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-6 px-2"
+          onClick={retry}
+          disabled={isRetrying}
+        >
+          {isRetrying ? (
+            <Loader2 className="h-3 w-3 animate-spin" />
+          ) : (
+            <RefreshCw className="h-3 w-3" />
+          )}
+          {isRetrying ? t("retrying") : t("retry")}
+        </Button>
+      </div>
+    );
+  }
+
+  return null;
+}

package/components/feedback/status-history.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { formatDistanceToNow } from "date-fns";
+import { zhCN } from "date-fns/locale";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Clock } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { STATUS_LABELS, STATUS_COLORS } from "@/lib/validations/feedback";
+
+interface StatusHistoryEntry {
+  historyId: number;
+  oldStatus: string;
+  newStatus: string;
+  changedBy: {
+    id: string;
+    name: string | null;
+    email: string;
+  } | null;
+  changedAt: string;
+  comment: string | null;
+}
+
+interface StatusHistoryProps {
+  history: StatusHistoryEntry[];
+  className?: string;
+}
+
+export function StatusHistory({ history, className }: StatusHistoryProps) {
+  if (history.length === 0) {
+    return null;
+  }
+
+  const getInitials = (name: string | null, email: string) => {
+    if (name) {
+      return name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    return email[0].toUpperCase();
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-lg flex items-center gap-2">
+          <Clock className="w-5 h-5" />
+          状态历史
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {history.map((entry) => (
+            <div key={entry.historyId} className="flex gap-4">
+              <div className="relative shrink-0">
+                <Avatar className="w-10 h-10 border-2 border-background">
+                  <AvatarFallback className="text-xs">
+                    {entry.changedBy
+                      ? getInitials(entry.changedBy.name, entry.changedBy.email)
+                      : "SYS"}
+                  </AvatarFallback>
+                </Avatar>
+              </div>
+
+              <div className="flex-1 pb-4 border-b border-border last:border-b-0 last:pb-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="font-medium text-sm">
+                    {entry.changedBy?.name || entry.changedBy?.email || "System"}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {formatDistanceToNow(new Date(entry.changedAt), {
+                      addSuffix: true,
+                      locale: zhCN,
+                    })}
+                  </span>
+                </div>
+
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Badge
+                    className={cn(
+                      "text-xs",
+                      STATUS_COLORS[entry.oldStatus as keyof typeof STATUS_COLORS],
+                    )}
+                  >
+                    {STATUS_LABELS[entry.oldStatus as keyof typeof STATUS_LABELS] ??
+                      entry.oldStatus}
+                  </Badge>
+                  <span className="text-muted-foreground">→</span>
+                  <Badge
+                    className={cn(
+                      "text-xs",
+                      STATUS_COLORS[entry.newStatus as keyof typeof STATUS_COLORS],
+                    )}
+                  >
+                    {STATUS_LABELS[entry.newStatus as keyof typeof STATUS_LABELS] ??
+                      entry.newStatus}
+                  </Badge>
+                </div>
+
+                {entry.comment && (
+                  <p className="text-sm text-muted-foreground mt-2 italic">
+                    &quot;{entry.comment}&quot;
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}