asepharyana
4f9d4a5c7d
- Deleted Item, Kbd, Marker, Message, NativeSelect, Questionnaire, Spinner components. - Replaced GlassCard with Card in VoiceActivityTimeline, VoiceConnectionCard, ListenControl, MicControl, and SpeakerWaveform components. - Introduced AppSidebar and ThemeToggle components for improved navigation and theme management.
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowLeft, MessageSquare, MessagesSquare } from "lucide-react";
|
|
import { Card } from "@/components/ui/card";
|
|
import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
|
|
import type { AttachmentRecord, MessageRecord } from "@/lib/types";
|
|
import { cn } from "@/lib/utils";
|
|
import { AiAnalysisPanel } from "./ai-analysis-panel";
|
|
import { AttachmentsGrid } from "./attachments-grid";
|
|
|
|
interface MessageDetailProps {
|
|
message: MessageRecord;
|
|
attachments?: AttachmentRecord[];
|
|
onBack?: () => void;
|
|
}
|
|
|
|
export function MessageDetail({
|
|
message,
|
|
attachments,
|
|
onBack,
|
|
}: MessageDetailProps) {
|
|
return (
|
|
<Card
|
|
className={cn("h-full", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
|
|
>
|
|
{onBack && (
|
|
<button
|
|
type="button"
|
|
onClick={onBack}
|
|
className="flex items-center gap-1 text-xs text-text-secondary/60 hover:text-text-primary mb-3 transition-colors"
|
|
>
|
|
<ArrowLeft className="size-3" /> Back
|
|
</button>
|
|
)}
|
|
|
|
{/* Message header */}
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<MessageSquare className="size-4 text-primary" />
|
|
<span className="font-semibold text-sm text-text-primary">
|
|
{message.username}
|
|
</span>
|
|
<span className="text-[10px] text-text-secondary/40 font-mono inline-flex items-center gap-1">
|
|
{message.thread_id && <MessagesSquare className="size-3" />}
|
|
{getMessageChannelLabel(message)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="text-sm text-text-primary/90 leading-relaxed mb-4 whitespace-pre-wrap">
|
|
{renderMessageContent(
|
|
message.edited_content ?? message.content,
|
|
message.metadata,
|
|
) || "(no text content)"}
|
|
</div>
|
|
|
|
{/* Attachments */}
|
|
{attachments && attachments.length > 0 && (
|
|
<div className="mb-4">
|
|
<AttachmentsGrid attachments={attachments} />
|
|
</div>
|
|
)}
|
|
|
|
{/* AI Analysis */}
|
|
<AiAnalysisPanel
|
|
status={message.ai_status}
|
|
severity={message.ai_severity}
|
|
confidence={message.ai_confidence}
|
|
flags={message.ai_moderation_flags}
|
|
categories={message.ai_categories}
|
|
action={message.ai_recommended_action}
|
|
score={message.ai_moderation_score}
|
|
analysis={message.ai_analysis}
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|