@nexttylabs/echo 0.2.0

package/components/feedback/tag-suggestions.tsx

@@ -0,0 +1,212 @@
+"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 { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Loader2, Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface TagSuggestion {
+  name: string;
+  slug: string;
+  confidence: number;
+  matchedKeywords: string[];
+}
+
+interface AppliedTag {
+  tagId: number;
+  name: string;
+  slug: string;
+  color: string | null;
+}
+
+interface TagSuggestionsProps {
+  feedbackId: number;
+  onTagsApplied?: () => void;
+}
+
+export function TagSuggestions({ feedbackId, onTagsApplied }: TagSuggestionsProps) {
+  const [suggestions, setSuggestions] = useState<TagSuggestion[]>([]);
+  const [appliedTags, setAppliedTags] = useState<AppliedTag[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedTags, setSelectedTags] = useState<Set<string>>(new Set());
+  const [isSaving, setIsSaving] = useState(false);
+
+  const loadSuggestions = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/api/feedback/${feedbackId}/suggest-tags`);
+      if (response.ok) {
+        const data = await response.json();
+        setSuggestions(data.suggestions || []);
+        setAppliedTags(data.applied || []);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [feedbackId]);
+
+  useEffect(() => {
+    loadSuggestions();
+  }, [loadSuggestions]);
+
+  async function applyTags() {
+    if (selectedTags.size === 0) return;
+
+    setIsSaving(true);
+    try {
+      const tagIds: number[] = [];
+
+      for (const slug of selectedTags) {
+        const response = await fetch("/api/tags/sync", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ slug }),
+        });
+
+        if (response.ok) {
+          const tag = await response.json();
+          tagIds.push(tag.tagId);
+        }
+      }
+
+      const existingTagIds = appliedTags.map((t) => t.tagId);
+      const allTagIds = [...existingTagIds, ...tagIds];
+
+      const applyResponse = await fetch(`/api/feedback/${feedbackId}/suggest-tags`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ tagIds: allTagIds }),
+      });
+
+      if (applyResponse.ok) {
+        setSelectedTags(new Set());
+        await loadSuggestions();
+        onTagsApplied?.();
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  function toggleTag(slug: string) {
+    const newSelected = new Set(selectedTags);
+    if (newSelected.has(slug)) {
+      newSelected.delete(slug);
+    } else {
+      newSelected.add(slug);
+    }
+    setSelectedTags(newSelected);
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Sparkles className="h-4 w-4 text-primary" />
+          <h3 className="font-medium">建议标签</h3>
+        </div>
+        {suggestions.length > 0 && (
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={applyTags}
+            disabled={selectedTags.size === 0 || isSaving}
+          >
+            {isSaving && <Loader2 className="mr-2 h-3 w-3 animate-spin" />}
+            应用选中 ({selectedTags.size})
+          </Button>
+        )}
+      </div>
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : suggestions.length === 0 ? (
+        <p className="text-sm text-muted-foreground text-center py-4">
+          暂无标签建议
+        </p>
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          {suggestions.map((suggestion) => {
+            const isSelected = selectedTags.has(suggestion.slug);
+            const confidencePercent = Math.round(suggestion.confidence * 100);
+
+            return (
+              <button
+                key={suggestion.slug}
+                type="button"
+                onClick={() => toggleTag(suggestion.slug)}
+                className={cn(
+                  "group relative px-3 py-1.5 rounded-md border-2 transition-all text-left",
+                  isSelected
+                    ? "border-primary bg-primary/10"
+                    : "border-border hover:border-primary/50",
+                )}
+              >
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">{suggestion.name}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {confidencePercent}%
+                  </span>
+                </div>
+
+                {suggestion.matchedKeywords.length > 0 && (
+                  <div className="hidden group-hover:block absolute z-10 bottom-full left-0 mb-2 px-2 py-1 bg-popover border rounded shadow-lg text-xs">
+                    <div className="font-medium mb-1">匹配关键词:</div>
+                    <div className="flex flex-wrap gap-1">
+                      {suggestion.matchedKeywords.map((kw, i) => (
+                        <span key={i} className="px-1.5 py-0.5 bg-muted rounded">
+                          {kw}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {appliedTags.length > 0 && (
+        <div className="pt-4 border-t">
+          <h4 className="text-sm font-medium mb-2">已应用标签</h4>
+          <div className="flex flex-wrap gap-2">
+            {appliedTags.map((tag) => (
+              <Badge
+                key={tag.tagId}
+                variant="secondary"
+                style={{
+                  backgroundColor: tag.color || "#3b82f6",
+                  color: "white",
+                }}
+              >
+                {tag.name}
+              </Badge>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/feedback/vote-button.tsx

@@ -0,0 +1,113 @@
+"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 { useState, useEffect, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { ThumbsUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface VoteButtonProps {
+  feedbackId: number;
+  initialVoteCount: number;
+  initialHasVoted?: boolean;
+  canVote?: boolean;
+  className?: string;
+  onVoteChange?: (hasVoted: boolean, newCount: number) => void;
+}
+
+export function VoteButton({
+  feedbackId,
+  initialVoteCount,
+  initialHasVoted = false,
+  canVote = true,
+  className,
+  onVoteChange,
+}: VoteButtonProps) {
+  const [voteCount, setVoteCount] = useState(initialVoteCount);
+  const [hasVoted, setHasVoted] = useState(initialHasVoted);
+  const [isLoading, setIsLoading] = useState(false);
+  const t = useTranslations("feedback");
+
+  useEffect(() => {
+    setVoteCount(initialVoteCount);
+  }, [initialVoteCount]);
+
+  useEffect(() => {
+    setHasVoted(initialHasVoted);
+  }, [initialHasVoted]);
+
+  const handleVote = useCallback(async () => {
+    if (!canVote || isLoading) return;
+
+    setIsLoading(true);
+    const optimisticVoted = !hasVoted;
+    const optimisticCount = optimisticVoted ? voteCount + 1 : voteCount - 1;
+
+    setHasVoted(optimisticVoted);
+    setVoteCount(optimisticCount);
+    onVoteChange?.(optimisticVoted, optimisticCount);
+
+    try {
+      const response = await fetch(`/api/feedback/${feedbackId}/vote`, {
+        method: optimisticVoted ? "POST" : "DELETE",
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+
+        setHasVoted(hasVoted);
+        setVoteCount(voteCount);
+        onVoteChange?.(hasVoted, voteCount);
+
+        if (error.code === "ALREADY_VOTED") {
+          setHasVoted(true);
+          onVoteChange?.(true, voteCount);
+        }
+
+        throw new Error(error.error || "Failed to update vote");
+      }
+    } catch (error) {
+      console.error("Error updating vote:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [canVote, isLoading, hasVoted, voteCount, feedbackId, onVoteChange]);
+
+  return (
+    <Button
+      variant={hasVoted ? "default" : "outline"}
+      size="sm"
+      onClick={handleVote}
+      disabled={!canVote || isLoading}
+      className={cn(
+        "gap-2 transition-all",
+        hasVoted && "bg-indigo-600 text-white hover:bg-indigo-700",
+        className,
+      )}
+    >
+      <ThumbsUp className={cn("w-4 h-4", hasVoted && "fill-current")} />
+      <span>{voteCount}</span>
+      <span className="hidden sm:inline">
+        {hasVoted ? t("vote.voted") : t("vote.vote")}
+      </span>
+    </Button>
+  );
+}

package/components/feedback/vote-list.tsx

@@ -0,0 +1,108 @@
+"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 { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { formatDistanceToNow, type Locale } from "date-fns";
+import { enUS, ja, zhCN } from "date-fns/locale";
+import { useLocale, useTranslations } from "next-intl";
+
+interface Vote {
+  voteId: number;
+  visitorId: string | null;
+  userId: string | null;
+  userName: string | null;
+  userEmail: string | null;
+  createdAt: string;
+}
+
+interface VoteListProps {
+  votes: Vote[];
+  className?: string;
+}
+
+export function VoteList({ votes, className }: VoteListProps) {
+  const t = useTranslations("feedback");
+  const locale = useLocale();
+
+  const localeMap: Record<string, Locale> = {
+    en: enUS,
+    "zh-CN": zhCN,
+    jp: ja,
+  };
+  const dateLocale = localeMap[locale] ?? enUS;
+
+  if (votes.length === 0) {
+    return (
+      <div className="text-center text-muted-foreground py-4">
+        {t("vote.noVotes")}
+      </div>
+    );
+  }
+
+  const getInitials = (name: string | null, email: string | null) => {
+    if (name) {
+      return name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    if (email) {
+      return email[0].toUpperCase();
+    }
+    return "?";
+  };
+
+  const getDisplayName = (vote: Vote) => {
+    if (vote.userName) return vote.userName;
+    if (vote.userEmail) return vote.userEmail;
+    if (vote.visitorId) return `${t("vote.visitor")} ${vote.visitorId.slice(0, 8)}`;
+    return t("vote.anonymous");
+  };
+
+  return (
+    <div className={className}>
+      <div className="space-y-3">
+        {votes.map((vote) => (
+          <div key={vote.voteId} className="flex items-center gap-3">
+            <Avatar className="w-8 h-8">
+              <AvatarFallback className="text-xs">
+                {getInitials(vote.userName, vote.userEmail)}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex-1">
+              <p className="font-medium text-sm">
+                {getDisplayName(vote)}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {formatDistanceToNow(new Date(vote.createdAt), {
+                  addSuffix: true,
+                  locale: dateLocale,
+                })}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/integrations/github-config.tsx

@@ -0,0 +1,200 @@
+"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 { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+export function GitHubConfig() {
+  const t = useTranslations("integrations.github");
+  const [accessToken, setAccessToken] = useState("");
+  const [owner, setOwner] = useState("");
+  const [repo, setRepo] = useState("");
+  const [autoSync, setAutoSync] = useState(true);
+  const [webhookInfo, setWebhookInfo] = useState<{
+    url: string;
+    secret: string;
+  } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [configured, setConfigured] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/integrations/github")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.configured) {
+          setConfigured(true);
+          setOwner(data.owner);
+          setRepo(data.repo);
+          setAutoSync(data.autoSync);
+        }
+      })
+      .catch(() => {
+        setError(t("failedToLoad"));
+      });
+  }, [t]);
+
+  async function save() {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/integrations/github", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ accessToken, owner, repo, autoSync }),
+      });
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || "Failed to save configuration");
+        return;
+      }
+
+      if (data.success) {
+        setConfigured(true);
+        setWebhookInfo({
+          url: data.webhookUrl,
+          secret: data.webhookSecret,
+        });
+      }
+    } catch {
+      setError("Failed to save configuration");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function disconnect() {
+    setLoading(true);
+    setError(null);
+    try {
+      await fetch("/api/integrations/github", { method: "DELETE" });
+      setConfigured(false);
+      setAccessToken("");
+      setOwner("");
+      setRepo("");
+      setWebhookInfo(null);
+    } catch {
+      setError("Failed to disconnect");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("title")}</CardTitle>
+        <CardDescription>
+          {t("description")}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="space-y-2">
+          <Label>{t("personalAccessToken")}</Label>
+          <Input
+            type="password"
+            value={accessToken}
+            onChange={(e) => setAccessToken(e.target.value)}
+            placeholder="ghp_..."
+            disabled={configured}
+          />
+          <p className="text-sm text-muted-foreground">
+            Requires <code>repo</code> scope for private repos
+          </p>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label>{t("owner")}</Label>
+            <Input
+              value={owner}
+              onChange={(e) => setOwner(e.target.value)}
+              placeholder="username or org"
+              disabled={configured}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>{t("repository")}</Label>
+            <Input
+              value={repo}
+              onChange={(e) => setRepo(e.target.value)}
+              placeholder="repo-name"
+              disabled={configured}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label>{t("autoSync")}</Label>
+          <Switch checked={autoSync} onCheckedChange={setAutoSync} />
+        </div>
+
+        {webhookInfo && (
+          <Alert>
+            <AlertDescription>
+              <p className="font-medium mb-2">{t("webhook.title")}</p>
+              <p className="text-sm">
+                URL: <code>{webhookInfo.url}</code>
+              </p>
+              <p className="text-sm">
+                Secret: <code>{webhookInfo.secret}</code>
+              </p>
+              <p className="text-sm mt-2">{t("webhook.events")}</p>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <div className="flex gap-2">
+          {configured ? (
+            <Button variant="destructive" onClick={disconnect} disabled={loading}>
+              {t("disconnect")}
+            </Button>
+          ) : (
+            <Button
+              onClick={save}
+              disabled={loading || !accessToken || !owner || !repo}
+            >
+              {loading ? t("connecting") : t("connect")}
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}