import { memo, useState } from "react"; import { ChevronDown, ChevronUp, Copy } from "lucide-react"; import { useTranslation } from "react-i18next"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import type { SessionMessage } from "@/types"; import { formatTimestamp, getRoleLabel, getRoleTone, highlightText, } from "./utils"; const COLLAPSE_THRESHOLD = 3000; const COLLAPSED_LENGTH = 1500; interface SessionMessageItemProps { message: SessionMessage; isActive: boolean; searchQuery?: string; onCopy: (content: string) => void; } export const SessionMessageItem = memo(function SessionMessageItem({ message, isActive, searchQuery, onCopy, }: SessionMessageItemProps) { const { t } = useTranslation(); const [expanded, setExpanded] = useState(false); const isLong = message.content.length > COLLAPSE_THRESHOLD; const hasSearchMatch = isLong && !expanded && !!searchQuery && message.content.toLowerCase().includes(searchQuery.toLowerCase()); const collapsed = isLong && !expanded && !hasSearchMatch; const displayContent = collapsed ? message.content.slice(0, COLLAPSED_LENGTH) + "…" : message.content; return (

{t("sessionManager.copyMessage", { defaultValue: "复制内容", })}

{getRoleLabel(message.role, t)} {message.ts && ( {formatTimestamp(message.ts)} )}

{searchQuery ? highlightText(displayContent, searchQuery) : displayContent}

{isLong && !hasSearchMatch && ( )}

); });