@nexttylabs/echo 0.2.0

package/components/feedback/duplicate-suggestions-inline.tsx

@@ -0,0 +1,158 @@
+"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, useRef } from "react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface SimilarFeedback {
+  feedbackId: number;
+  title: string;
+  similarity: number;
+}
+
+interface DuplicateSuggestionsInlineProps {
+  query: string;
+  organizationId?: string;
+  className?: string;
+  debounceMs?: number;
+}
+
+/**
+ * Inline duplicate suggestions component that appears below the title input.
+ * Fetches similar feedbacks from the API and displays them as clickable links.
+ */
+export function DuplicateSuggestionsInline({
+  query,
+  organizationId,
+  className,
+  debounceMs = 300,
+}: DuplicateSuggestionsInlineProps) {
+  const [suggestions, setSuggestions] = useState<SimilarFeedback[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const debounceRef = useRef<number | null>(null);
+
+  const fetchSuggestions = useCallback(
+    async (searchQuery: string) => {
+      if (!searchQuery.trim() || searchQuery.length < 3) {
+        setSuggestions([]);
+        return;
+      }
+
+      // Cancel previous request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+
+      setIsLoading(true);
+      try {
+        const params = new URLSearchParams({ title: searchQuery });
+        if (organizationId) {
+          params.set("organizationId", organizationId);
+        }
+
+        const response = await fetch(`/api/feedback/similar?${params}`, {
+          signal: controller.signal,
+          headers: organizationId
+            ? { "x-organization-id": organizationId }
+            : undefined,
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          setSuggestions(data.suggestions || []);
+        }
+      } catch (error) {
+        if ((error as Error).name !== "AbortError") {
+          console.error("Failed to fetch suggestions:", error);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [organizationId]
+  );
+
+  useEffect(() => {
+    // Clear previous debounce
+    if (debounceRef.current !== null) {
+      window.clearTimeout(debounceRef.current);
+    }
+
+    // Debounce the fetch
+    debounceRef.current = window.setTimeout(() => {
+      fetchSuggestions(query);
+    }, debounceMs);
+
+    return () => {
+      if (debounceRef.current !== null) {
+        window.clearTimeout(debounceRef.current);
+      }
+    };
+  }, [query, debounceMs, fetchSuggestions]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+
+  if (suggestions.length === 0 && !isLoading) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "mt-2 rounded-md border border-orange-200 bg-orange-50/50 p-3 dark:border-orange-800 dark:bg-orange-950/20",
+        className
+      )}
+    >
+      <p className="text-xs font-medium text-orange-700 dark:text-orange-400 mb-2">
+        {isLoading ? "正在查找相似反馈..." : "可能存在相似反馈:"}
+      </p>
+      {!isLoading && (
+        <ul className="space-y-1">
+          {suggestions.map((item) => (
+            <li key={item.feedbackId} className="text-sm">
+              <Link
+                href={`/feedback/${item.feedbackId}`}
+                target="_blank"
+                className="text-orange-600 hover:text-orange-800 hover:underline dark:text-orange-400 dark:hover:text-orange-300"
+              >
+                {item.title}
+              </Link>
+              <span className="ml-2 text-xs text-muted-foreground">
+                ({item.similarity}% 相似)
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/components/feedback/duplicate-suggestions.tsx

@@ -0,0 +1,188 @@
+"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 Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Loader2, AlertTriangle, Check, X } from "lucide-react";
+
+interface DuplicateCandidate {
+  feedbackId: number;
+  title: string;
+  description: string;
+  similarity: number;
+  reasons: string[];
+}
+
+interface DuplicateSuggestionsProps {
+  feedbackId: number;
+  onDismiss?: () => void;
+}
+
+export function DuplicateSuggestions({
+  feedbackId,
+  onDismiss,
+}: DuplicateSuggestionsProps) {
+  const [duplicates, setDuplicates] = useState<DuplicateCandidate[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [confirming, setConfirming] = useState<number | null>(null);
+
+  const loadDuplicates = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/api/feedback/${feedbackId}/duplicates`);
+      if (response.ok) {
+        const data = await response.json();
+        setDuplicates(data.suggestions || []);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [feedbackId]);
+
+  useEffect(() => {
+    loadDuplicates();
+  }, [loadDuplicates]);
+
+  async function confirmDuplicate(duplicateId: number, confirmed: boolean) {
+    setConfirming(duplicateId);
+    try {
+      await fetch(`/api/feedback/${feedbackId}/duplicates`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          duplicateFeedbackId: duplicateId,
+          status: confirmed ? "confirmed" : "rejected",
+        }),
+      });
+
+      setDuplicates((prev) => prev.filter((d) => d.feedbackId !== duplicateId));
+
+      if (duplicates.length === 1 && onDismiss) {
+        onDismiss();
+      }
+    } finally {
+      setConfirming(null);
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (duplicates.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card className="border-orange-200 bg-orange-50/50 dark:border-orange-800 dark:bg-orange-950/20">
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <AlertTriangle className="h-5 w-5 text-orange-600 dark:text-orange-500" />
+          <CardTitle className="text-orange-900 dark:text-orange-100">
+            发现潜在重复反馈
+          </CardTitle>
+        </div>
+        <CardDescription>
+          此反馈可能与现有反馈重复，请在继续前进行审核。
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {duplicates.map((duplicate) => (
+          <div
+            key={duplicate.feedbackId}
+            className="p-4 bg-background rounded-lg border space-y-3"
+          >
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <Badge
+                    variant="outline"
+                    className="text-orange-600 border-orange-600 dark:text-orange-400 dark:border-orange-400"
+                  >
+                    {duplicate.similarity}% 相似
+                  </Badge>
+                  <Link
+                    href={`/feedback/${duplicate.feedbackId}`}
+                    className="text-sm text-muted-foreground hover:underline"
+                  >
+                    查看原始反馈 →
+                  </Link>
+                </div>
+                <h4 className="font-medium truncate">{duplicate.title}</h4>
+                {duplicate.description && (
+                  <p className="text-sm text-muted-foreground line-clamp-2 mt-1">
+                    {duplicate.description}
+                  </p>
+                )}
+                {duplicate.reasons.length > 0 && (
+                  <ul className="text-xs text-muted-foreground mt-2 space-y-1">
+                    {duplicate.reasons.map((reason, i) => (
+                      <li key={i}>• {reason}</li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+
+              <div className="flex gap-2 shrink-0">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => confirmDuplicate(duplicate.feedbackId, false)}
+                  disabled={confirming === duplicate.feedbackId}
+                >
+                  <X className="h-4 w-4 mr-1" />
+                  非重复
+                </Button>
+                <Button
+                  size="sm"
+                  className="bg-orange-600 hover:bg-orange-700"
+                  onClick={() => confirmDuplicate(duplicate.feedbackId, true)}
+                  disabled={confirming === duplicate.feedbackId}
+                >
+                  {confirming === duplicate.feedbackId ? (
+                    <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                  ) : (
+                    <Check className="h-4 w-4 mr-1" />
+                  )}
+                  标记为重复
+                </Button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}