@allbluecn/web-app 0.6.3 → 0.7.0

package/src/plugins/core/prd/components/prd-agent-panel.tsx

@@ -0,0 +1,429 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// 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, useRef, useEffect, useCallback } from "react"
+import { useTranslation } from "react-i18next"
+import { Bot, Loader2, User, Plus, Trash2, ChevronDown, MessageSquare } from "lucide-react"
+import { cn } from "@/components/ui-shared/utils"
+import { toast } from '@/components/ui-shared/sonner'
+import type { CanvasElement } from "@allbluecn/shared/types/prototype"
+import { getAllComponents } from "@/lib/prototype-registry"
+import { generatePrototypeFn, type GeneratedComponent } from "@/plugins/core/prd/serverFns/ai/generate-prototype"
+import { computeStackPositions } from "@/lib/prd/stack-layout"
+import { listEnabledModelsFn } from "@/plugins/core/prd/serverFns/ai/providers"
+import {
+  listAgentConversationsFn,
+  createAgentConversationFn,
+  deleteAgentConversationFn,
+  clearAgentConversationsFn,
+  getAgentMessagesFn,
+  saveAgentMessageFn,
+} from "@/plugins/core/prd/serverFns/ai/agent-conversations"
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui-shared/dropdown-menu"
+import { AgentInput, type ModelOption } from "./agent-input"
+
+interface ChatMessage {
+  id: string
+  role: "user" | "assistant"
+  content: string
+  isError?: boolean
+}
+
+interface ConversationItem {
+  id: string
+  title: string
+  createdAt: string | Date
+  updatedAt: string | Date
+}
+
+interface PRDAgentPanelProps {
+  prdId: string
+  elements: CanvasElement[]
+  onElementsChange: (elements: CanvasElement[]) => void
+  selectedModel: string
+  onModelChange: (model: string) => void
+}
+
+/** 将会话按 updatedAt 分组（今天/昨天/本周/更早） */
+function groupConversations(conversations: ConversationItem[], t: (key: string) => string): Array<{ label: string; items: ConversationItem[] }> {
+  const now = new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const yesterday = new Date(today.getTime() - 86400000)
+  const weekAgo = new Date(today.getTime() - 7 * 86400000)
+
+  const groupKeys = ["agent.today", "agent.yesterday", "agent.thisWeek", "agent.earlier"]
+  const groups: Record<string, ConversationItem[]> = {
+    [groupKeys[0]]: [],
+    [groupKeys[1]]: [],
+    [groupKeys[2]]: [],
+    [groupKeys[3]]: [],
+  }
+  for (const conv of conversations) {
+    const d = new Date(conv.updatedAt)
+    if (d >= today) groups[groupKeys[0]].push(conv)
+    else if (d >= yesterday) groups[groupKeys[1]].push(conv)
+    else if (d >= weekAgo) groups[groupKeys[2]].push(conv)
+    else groups[groupKeys[3]].push(conv)
+  }
+  return groupKeys.map((key) => ({ label: t(key), items: groups[key] }))
+}
+
+/** 将 AI 生成的组件规格转换为 CanvasElement[] */
+function generatedToElements(
+  components: GeneratedComponent[],
+  existing: CanvasElement[],
+): CanvasElement[] {
+  const allComponents = getAllComponents()
+
+  // 先确定每个组件最终采用的尺寸，再按实际高度纵向堆叠
+  const resolved = components.map((comp) => {
+    const config = allComponents.find((c) => c.type === comp.type)
+    const width = comp.width ?? config?.defaultWidth ?? 160
+    // 未注册的自定义组件（如表格）通常内容较多，给更大的默认高度避免被压缩到不可见
+    const height = comp.height ?? config?.defaultHeight ?? (config ? 48 : 120)
+    return { comp, config, width, height }
+  })
+
+  const positions = computeStackPositions(
+    existing,
+    resolved.map((r) => ({ height: r.height })),
+    {
+      startX: 40,
+      startY: 40,
+      gap: 20,
+    },
+  )
+
+  const baseZ = existing.length > 0
+    ? Math.max(...existing.map((e) => e.zIndex)) + 1
+    : 1
+
+  return resolved.map(({ comp, config, width, height }, i) => {
+    // 保留 AI 给的原始 type：注册表能查到就用真实组件渲染，查不到由 PrototypeElement 兜底 GenericPrototype
+    return {
+      id: `elem_${Date.now()}_${i}`,
+      type: comp.type,
+      x: Math.round(positions[i].x),
+      y: Math.round(positions[i].y),
+      width,
+      height,
+      zIndex: baseZ + i,
+      overrides: comp.props ?? {},
+      style: config ? { ...config.defaultStyle } : {},
+    } satisfies CanvasElement
+  })
+}
+
+export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel, onModelChange }: PRDAgentPanelProps) {
+  const { t } = useTranslation("prd")
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [input, setInput] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [models, setModels] = useState<ModelOption[]>([])
+  const [conversations, setConversations] = useState<ConversationItem[]>([])
+  const [conversationId, setConversationId] = useState<string | null>(null)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  const refreshConversations = useCallback(async () => {
+    try {
+      const list = await listAgentConversationsFn({ data: { prdId } })
+      setConversations(list as ConversationItem[])
+    } catch {}
+  }, [prdId])
+
+  // 首次加载会话列表
+  useEffect(() => {
+    refreshConversations()
+  }, [refreshConversations])
+
+  // 会话列表变化时，默认选中最新（第一个）会话；无会话则 conversationId=null（空状态）
+  useEffect(() => {
+    if (conversations.length > 0 && !conversationId) {
+      setConversationId(conversations[0].id)
+    }
+    if (conversations.length === 0 && conversationId) {
+      setConversationId(null)
+      setMessages([])
+    }
+  }, [conversations])
+
+  // 切换会话时加载消息
+  useEffect(() => {
+    if (!conversationId) {
+      setMessages([])
+      return
+    }
+    getAgentMessagesFn({ data: { conversationId } })
+      .then((msgs) => {
+        setMessages(
+          (msgs as Array<{ id: string; role: string; content: string; isError: boolean }>).map((m) => ({
+            id: m.id,
+            role: m.role as "user" | "assistant",
+            content: m.content,
+            isError: m.isError,
+          })),
+        )
+      })
+      .catch(() => setMessages([]))
+  }, [conversationId])
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [messages])
+
+  useEffect(() => {
+    listEnabledModelsFn()
+      .then((data) => {
+        const typed = data as ModelOption[]
+        setModels(typed)
+        if (typed.length > 0 && !selectedModel) onModelChange(typed[0].model)
+      })
+      .catch(() => {})
+  }, [])
+
+  const handleSend = async () => {
+    const trimmed = input.trim()
+    if (!trimmed || loading) return
+
+    // 确保 conversationId 存在
+    let convId = conversationId
+    if (!convId) {
+      try {
+        const conv = await createAgentConversationFn({
+          data: { prdId, title: trimmed.slice(0, 20) },
+        })
+        convId = (conv as { id: string }).id
+        setConversationId(convId)
+        refreshConversations()
+      } catch (err) {
+        const errMsg = err instanceof Error ? err.message : t("agent.createFailed")
+        toast.error(t("agent.createFailed"), { description: errMsg })
+        return
+      }
+    }
+
+    const userMsg: ChatMessage = {
+      id: `u_${Date.now()}`,
+      role: "user",
+      content: trimmed,
+    }
+    setMessages((prev) => [...prev, userMsg])
+    setInput("")
+    setLoading(true)
+
+    try {
+      await saveAgentMessageFn({
+        data: { conversationId: convId, role: "user", content: trimmed },
+      })
+
+      const catalog = getAllComponents().map((c) => ({
+        type: c.type,
+        name: c.name,
+        category: c.category,
+      }))
+
+      const result = await generatePrototypeFn({
+        data: { prompt: trimmed, componentCatalog: catalog, model: selectedModel || undefined },
+      })
+
+      const newElements = generatedToElements(result.components, elements)
+      if (newElements.length > 0) {
+        onElementsChange([...elements, ...newElements])
+      }
+
+      const assistantContent = `${result.message}${t("agent.addedToCanvas", { count: newElements.length })}`
+      const assistantMsg: ChatMessage = {
+        id: `a_${Date.now()}`,
+        role: "assistant",
+        content: assistantContent,
+      }
+      setMessages((prev) => [...prev, assistantMsg])
+
+      await saveAgentMessageFn({
+        data: {
+          conversationId: convId,
+          role: "assistant",
+          content: assistantContent,
+          components: result.components as unknown,
+        },
+      })
+      refreshConversations()
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : t("agent.generateFailed")
+      const errorContent = `${t("agent.generateFailed")}：${errMsg}`
+      const errorMsg: ChatMessage = {
+        id: `e_${Date.now()}`,
+        role: "assistant",
+        content: errorContent,
+        isError: true,
+      }
+      setMessages((prev) => [...prev, errorMsg])
+      await saveAgentMessageFn({
+        data: { conversationId: convId, role: "assistant", content: errorContent, isError: true },
+      }).catch(() => {})
+      toast.error(t("agent.prototypeFailed"), { description: errMsg })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* 会话选择器 */}
+      <div className="shrink-0 flex items-center gap-1 px-2 py-1.5 border-b">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="flex flex-1 items-center gap-1 rounded-md px-1.5 py-1 text-xs text-muted-foreground hover:bg-muted min-w-0">
+              <MessageSquare className="size-3 shrink-0" />
+              <span className="truncate">
+                {conversationId
+                  ? conversations.find((c) => c.id === conversationId)?.title ?? t("agent.unknownConv")
+                  : t("agent.newConv")}
+              </span>
+              <ChevronDown className="size-3 shrink-0" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="min-w-56 max-h-80 overflow-y-auto rounded-lg p-1">
+            {groupConversations(conversations, t).map(({ label, items }) => (
+              items.length > 0 && (
+                <DropdownMenuGroup key={label}>
+                  <DropdownMenuLabel className="text-[10px] text-muted-foreground/60">{label}</DropdownMenuLabel>
+                  {items.map((conv) => (
+                    <DropdownMenuItem
+                      key={conv.id}
+                      className="group/item flex items-center justify-between rounded text-xs"
+                      onClick={() => setConversationId(conv.id)}
+                    >
+                      <span className="truncate">{conv.title}</span>
+                      <button
+                        type="button"
+                        className="ml-1 shrink-0 rounded p-0.5 opacity-0 group-hover/item:opacity-100 hover:bg-destructive/10 hover:text-destructive"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          deleteAgentConversationFn({ data: { id: conv.id } }).then(() => {
+                            if (conversationId === conv.id) setConversationId(null)
+                            refreshConversations()
+                          })
+                        }}
+                      >
+                        <Trash2 className="size-3" />
+                      </button>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuGroup>
+              )
+            ))}
+            {conversations.length === 0 && (
+              <div className="px-2 py-3 text-center text-xs text-muted-foreground">{t("agent.noConversations")}</div>
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="rounded text-xs text-muted-foreground"
+              onClick={() => {
+                setConversationId(null)
+                setMessages([])
+              }}
+            >
+              <Plus className="size-3" /> {t("agent.newConversation")}
+            </DropdownMenuItem>
+            {conversations.length > 0 && (
+              <DropdownMenuItem
+                className="rounded text-xs text-destructive"
+                onClick={() => {
+                  clearAgentConversationsFn({ data: { prdId } }).then(() => {
+                    setConversationId(null)
+                    setMessages([])
+                    refreshConversations()
+                  })
+                }}
+              >
+                <Trash2 className="size-3" /> {t("agent.clearAll")}
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div ref={scrollRef} className="flex-1 overflow-y-auto p-2 space-y-2">
+        {messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-center gap-2 text-muted-foreground">
+            <Bot className="size-8 opacity-40" />
+            <p className="text-xs">{t("agent.emptyHint")}</p>
+            <p className="text-[10px] opacity-60">{t("agent.emptyExample")}</p>
+          </div>
+        ) : (
+          messages.map((msg) => (
+            <div
+              key={msg.id}
+              className={cn(
+                "flex gap-1.5",
+                msg.role === "user" ? "justify-end" : "justify-start",
+              )}
+            >
+              {msg.role === "assistant" && (
+                <Bot className="size-4 shrink-0 mt-0.5 text-muted-foreground" />
+              )}
+              <div
+                className={cn(
+                  "max-w-[80%] rounded-md px-2 py-1.5 text-xs",
+                  msg.role === "user"
+                    ? "bg-primary text-primary-foreground"
+                    : msg.isError
+                      ? "bg-destructive/10 text-destructive"
+                      : "bg-muted",
+                )}
+              >
+                {msg.content}
+              </div>
+              {msg.role === "user" && (
+                <User className="size-4 shrink-0 mt-0.5 text-muted-foreground" />
+              )}
+            </div>
+          ))
+        )}
+        {loading && (
+          <div className="flex gap-1.5 justify-start">
+            <Bot className="size-4 shrink-0 mt-0.5 text-muted-foreground" />
+            <div className="bg-muted rounded-md px-2 py-1.5">
+              <Loader2 className="size-3 animate-spin text-muted-foreground" />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <AgentInput
+        value={input}
+        onChange={setInput}
+        onSubmit={handleSend}
+        loading={loading}
+        models={models}
+        selectedModel={selectedModel}
+        onModelChange={onModelChange}
+      />
+    </div>
+  )
+}

package/src/plugins/core/prd/components/prd-comment-review-panel.tsx

@@ -0,0 +1,227 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// 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 { useTranslation } from "react-i18next";
+import { cn } from "@/components/ui-shared/utils";
+import { Badge } from "@/components/ui-shared/badge";
+import { Button } from "@/components/ui-shared/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui-shared/tooltip";
+import { MessageSquare, ClipboardCheck, Check, X, Reply, ChevronUp } from "lucide-react";
+import { toast } from '@/components/ui-shared/sonner';
+import { useSession } from "@/components/ui-shared/auth-client";
+import { maskEmail, formatTime, formatEditedTime } from "@/lib/comment-utils";
+import { UserAvatar } from "@/components/ui-shared";
+import type { AvatarConfig, ShapeType } from "@allbluecn/shared";
+import { listCommentsFn, ignoreCommentFn } from "@/plugins/core/prd/serverFns/comments";
+
+const SUBTABS = [
+  { key: "comment", label: "comment.subtabComment", icon: <MessageSquare className="size-3.5" /> },
+  { key: "review", label: "comment.subtabReview", icon: <ClipboardCheck className="size-3.5" /> },
+] as const;
+
+interface CommentUser {
+  id: string;
+  username: string;
+  email: string;
+  avatarConfig?: AvatarConfig | null;
+  bgShape?: ShapeType | null;
+  bgColor?: string | null;
+}
+
+interface Comment {
+  id: string;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  user: CommentUser;
+}
+
+interface PRDCommentReviewPanelProps {
+  prdId: string;
+}
+
+export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
+  const { t } = useTranslation("prd");
+  const { data: session } = useSession();
+  const [activeSubTab, setActiveSubTab] = useState("comment");
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [ignoredIds, setIgnoredIds] = useState<Set<string>>(new Set());
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!session?.user?.id) {
+      listCommentsFn({ data: { prdId } })
+        .then((all) => setComments(all.map((c) => ({ ...c, createdAt: c.createdAt.toISOString(), updatedAt: c.updatedAt?.toISOString() ?? '', user: { ...c.user, avatarConfig: c.user.avatarConfig as AvatarConfig | null, bgShape: c.user.bgShape as ShapeType | null, bgColor: c.user.bgColor } }))))
+        .catch(() => {});
+      return;
+    }
+    listCommentsFn({ data: { prdId, includeResolved: true } })
+      .then((all) => {
+        const mapped = all.map((c) => ({ ...c, createdAt: c.createdAt.toISOString(), updatedAt: c.updatedAt?.toISOString() ?? '', user: { ...c.user, avatarConfig: c.user.avatarConfig as AvatarConfig | null, bgShape: c.user.bgShape as ShapeType | null, bgColor: c.user.bgColor } }));
+        setComments(mapped.filter((c) => !c.resolved));
+        setIgnoredIds(new Set(mapped.filter((c) => c.resolved).map((c) => c.id)));
+      })
+      .catch(() => {});
+  }, [prdId, session?.user?.id]);
+
+  const toggleIgnore = async (id: string) => {
+    const willIgnore = !ignoredIds.has(id);
+    setIgnoredIds((prev) => {
+      const next = new Set(prev);
+      if (willIgnore) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+    try {
+      await ignoreCommentFn({ data: { id } });
+    } catch {
+      setIgnoredIds((prev) => {
+        const next = new Set(prev);
+        if (willIgnore) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    }
+  };
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const commentCount = comments.filter((c) => !ignoredIds.has(c.id)).length;
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="shrink-0 flex items-center h-10 mt-2 ">
+        {SUBTABS.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => setActiveSubTab(tab.key)}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-1.5 text-xs font-medium h-full transition-colors",
+              activeSubTab === tab.key
+                ? "text-foreground border-b-2 border-primary"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {tab.icon} {t(tab.label)}{tab.key === "comment" && commentCount > 0 && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="text-[10px] text-muted-foreground ml-0.5">({commentCount})</span>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="text-xs">{t("comment.countTooltip")}</TooltipContent>
+              </Tooltip>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {activeSubTab === "comment" ? (
+        <div className="flex-1 overflow-y-auto p-3 space-y-3">
+          {/* <span className="text-xs font-medium text-muted-foreground">评论</span> */}
+          {comments.length === 0 ? (
+            <p className="text-xs text-muted-foreground text-center py-4">{t("comment.noComments")}</p>
+          ) : (
+            <div className="space-y-3">
+              {comments.map((c) => {
+                const editedDiffMs = new Date(c.updatedAt).getTime() - new Date(c.createdAt).getTime();
+                const isEdited = editedDiffMs > 1000;
+                const isIgnored = ignoredIds.has(c.id);
+                const isExpanded = expandedIds.has(c.id);
+                return (
+                  <div key={c.id} className="flex gap-2 text-xs">
+                    <UserAvatar
+                      avatarConfig={c.user.avatarConfig as AvatarConfig | null | undefined}
+                      bgShape={c.user.bgShape as ShapeType | null | undefined}
+                      bgColor={c.user.bgColor}
+                      name={c.user.username}
+                      className="size-7"
+                    />
+                    {isIgnored && !isExpanded ? (
+                      <button onClick={() => toggleExpand(c.id)} className="flex-1 min-w-0 flex items-center gap-1.5 text-left cursor-pointer hover:bg-muted/30 rounded px-1 -mx-1 py-0.5 transition-colors">
+                        <span className="text-sm font-medium">{c.user.username}</span>
+                        <span className="text-[10px] text-muted-foreground">{maskEmail(c.user.email)}</span>
+                        <Badge variant="outline" className="text-[9px] h-3.5 px-1 leading-none font-normal text-muted-foreground">{t("comment.ignored")}</Badge>
+                        <span className="text-[10px] text-muted-foreground ml-auto">
+                          {isEdited ? formatEditedTime(c.updatedAt) : formatTime(c.createdAt)}
+                        </span>
+                      </button>
+                    ) : (
+                      <div className="flex-1 min-w-0 space-y-0.5">
+                        <div className="flex items-center gap-1.5 flex-wrap">
+                          <span className="text-sm font-medium">{c.user.username}</span>
+                          {isEdited && (
+                            <Badge variant="secondary" className="text-[9px] h-3.5 px-1 leading-none font-normal">{t("comment.modified")}</Badge>
+                          )}
+                          {isIgnored && (
+                            <Badge variant="outline" className="text-[9px] h-3.5 px-1 leading-none font-normal text-muted-foreground">{t("comment.ignored")}</Badge>
+                          )}
+                          <span className="text-[10px] text-muted-foreground ml-auto">
+                            {isEdited ? formatEditedTime(c.updatedAt) : formatTime(c.createdAt)}
+                          </span>
+                        </div>
+                        <span className="text-[10px] text-muted-foreground block">{maskEmail(c.user.email)}</span>
+                        <p className=" break-words">{c.content}</p>
+                        <div className="flex items-center gap-1 pt-0.5">
+                          <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-green-600 disabled:opacity-40" disabled={isIgnored} onClick={() => toast.success(t("comment.accepted"))}>
+                            <Check className="size-2.5" />
+                            {t("comment.accept")}
+                          </Button>
+                          <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-foreground disabled:opacity-40" disabled={isIgnored} onClick={() => toast.info(t("comment.replyComingSoon"))}>
+                            <Reply className="size-2.5" />
+                            {t("comment.reply")}
+                          </Button>
+                          <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-red-600" onClick={() => toggleIgnore(c.id)}>
+                            <X className="size-2.5" />
+                            {isIgnored ? t("comment.unignore") : t("comment.ignore")}
+                          </Button>
+                          {isIgnored && (
+                            <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-foreground" onClick={() => toggleExpand(c.id)}>
+                              <ChevronUp className="size-2.5" />
+                              {t("comment.collapse")}
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="flex-1 overflow-y-auto p-3 space-y-3">
+          {/* <span className="text-xs font-medium text-muted-foreground">评审</span> */}
+          <p className="text-xs text-muted-foreground text-center py-4">{t("comment.reviewComingSoon")}</p>
+        </div>
+      )}
+    </div>
+  );
+}