Makelore 2.0 initial clean snapshot
This commit is contained in:
inman
920
src/pages/Chat/ChatMessage.tsx
Normal file
920
src/pages/Chat/ChatMessage.tsx
Normal file
@@ -0,0 +1,920 @@
|
||||
/**
|
||||
* Chat Message Component
|
||||
* Renders user / assistant / system / toolresult messages
|
||||
* with markdown, images, and tool cards. Thinking output is
|
||||
* surfaced via ExecutionGraphCard, not inside message bubbles.
|
||||
*/
|
||||
import { useState, useCallback, useEffect, memo } from 'react';
|
||||
import { Sparkles, Copy, Check, ChevronDown, ChevronRight, Wrench, FileText, Music, FileArchive, File, X, FolderOpen, ZoomIn, Loader2, CheckCircle2, AlertCircle, Clock3 } from 'lucide-react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkMath from 'remark-math';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { invokeIpc, statFile } from '@/lib/api-client';
|
||||
import type { RawMessage, AttachedFileMeta } from '@/types/chat';
|
||||
import { extractText, extractImages, extractToolUse, formatTimestamp } from './message-utils';
|
||||
import { getToolVisibilityId } from './chat-transcript';
|
||||
|
||||
interface ChatMessageProps {
|
||||
message: RawMessage;
|
||||
messageKey?: string;
|
||||
showTimestamps?: boolean;
|
||||
expandedToolIds?: ReadonlySet<string>;
|
||||
onToolExpandedChange?: (toolId: string, expanded: boolean) => void;
|
||||
assistantAvatarSrc?: string;
|
||||
assistantAvatarAlt?: string;
|
||||
textOverride?: string;
|
||||
suppressToolCards?: boolean;
|
||||
suppressProcessAttachments?: boolean;
|
||||
/**
|
||||
* When true, hides the assistant text bubble (and any thinking block that
|
||||
* would be shown above it). Used when the message's text is being folded
|
||||
* into an ExecutionGraphCard as a narration step, to prevent the same text
|
||||
* from appearing both inside the graph and as an orphan bubble in the chat
|
||||
* stream.
|
||||
*/
|
||||
suppressAssistantText?: boolean;
|
||||
isStreaming?: boolean;
|
||||
streamingTools?: Array<{
|
||||
id?: string;
|
||||
toolCallId?: string;
|
||||
name: string;
|
||||
status: 'running' | 'completed' | 'error';
|
||||
durationMs?: number;
|
||||
summary?: string;
|
||||
}>;
|
||||
/**
|
||||
* Optional callback invoked when a non-image file card is clicked.
|
||||
* When provided, the file opens in the in-app preview panel instead of
|
||||
* the system default editor.
|
||||
*/
|
||||
onOpenFile?: (file: AttachedFileMeta) => void;
|
||||
}
|
||||
|
||||
interface ExtractedImage { url?: string; data?: string; mimeType: string; }
|
||||
|
||||
const DIRECTORY_MIME_TYPE = 'application/x-directory';
|
||||
const EMPTY_TOOL_IDS: ReadonlySet<string> = new Set<string>();
|
||||
|
||||
function isChatPreviewDocument(file: AttachedFileMeta): boolean {
|
||||
const name = file.fileName.toLowerCase();
|
||||
const mime = file.mimeType.toLowerCase();
|
||||
return (
|
||||
mime === 'application/pdf'
|
||||
|| mime === 'application/vnd.ms-excel'
|
||||
|| mime === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
|| name.endsWith('.pdf')
|
||||
|| name.endsWith('.xls')
|
||||
|| name.endsWith('.xlsx')
|
||||
);
|
||||
}
|
||||
|
||||
function isDirectoryAttachment(file: AttachedFileMeta): boolean {
|
||||
return file.mimeType === DIRECTORY_MIME_TYPE;
|
||||
}
|
||||
|
||||
function validationKindForAttachment(file: AttachedFileMeta): 'file' | 'dir' | null {
|
||||
if (!file.filePath) return null;
|
||||
// User-selected uploads and already enriched attachments are trusted enough
|
||||
// for immediate display. Regex-derived message refs start at size 0/null and
|
||||
// are validated through main-process stat before becoming clickable cards.
|
||||
if (file.source !== 'message-ref' && file.source !== 'tool-result') return null;
|
||||
if (file.fileSize > 0 || file.preview) return null;
|
||||
return isDirectoryAttachment(file) ? 'dir' : 'file';
|
||||
}
|
||||
|
||||
function attachmentIdentity(file: AttachedFileMeta): string {
|
||||
return file.filePath?.trim()
|
||||
|| file.runtimeUrl?.trim()
|
||||
|| `${file.mimeType}:${file.fileName}:${file.fileSize}`;
|
||||
}
|
||||
|
||||
function normalizeRenderableAttachments(files: AttachedFileMeta[]): AttachedFileMeta[] {
|
||||
const normalized: AttachedFileMeta[] = [];
|
||||
const indexes = new Map<string, number>();
|
||||
|
||||
for (const file of files) {
|
||||
const key = attachmentIdentity(file);
|
||||
const existingIndex = indexes.get(key);
|
||||
if (existingIndex === undefined) {
|
||||
indexes.set(key, normalized.length);
|
||||
normalized.push(file);
|
||||
continue;
|
||||
}
|
||||
|
||||
const existing = normalized[existingIndex];
|
||||
if (!existing.preview && file.preview) {
|
||||
normalized[existingIndex] = file;
|
||||
}
|
||||
}
|
||||
|
||||
// Images need actual preview bytes/URLs to be meaningful in the transcript.
|
||||
// A metadata-only image record otherwise becomes a misleading blank file tile.
|
||||
return normalized.filter((file) => !file.mimeType.startsWith('image/') || Boolean(file.preview));
|
||||
}
|
||||
|
||||
function previewMimeFromPath(filePath: string): string | null {
|
||||
const lower = filePath.toLowerCase();
|
||||
if (lower.endsWith('.md') || lower.endsWith('.markdown')) return 'text/markdown';
|
||||
if (lower.endsWith('.pdf')) return 'application/pdf';
|
||||
if (lower.endsWith('.xls')) return 'application/vnd.ms-excel';
|
||||
if (lower.endsWith('.xlsx')) return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
||||
return null;
|
||||
}
|
||||
|
||||
function fileNameFromPath(filePath: string): string {
|
||||
return filePath.split(/[\\/]/).pop() || 'file';
|
||||
}
|
||||
|
||||
function trimPathTerminators(filePath: string): string {
|
||||
return filePath.replace(/[，。；;,.!?]+$/u, '');
|
||||
}
|
||||
|
||||
function extractPreviewDocumentPaths(text: string): AttachedFileMeta[] {
|
||||
if (!text) return [];
|
||||
const refs: AttachedFileMeta[] = [];
|
||||
const seen = new Set<string>();
|
||||
const pushRef = (filePath: string, mimeType: string) => {
|
||||
const normalizedPath = trimPathTerminators(filePath);
|
||||
if (!normalizedPath || seen.has(normalizedPath)) return;
|
||||
seen.add(normalizedPath);
|
||||
refs.push({
|
||||
fileName: fileNameFromPath(normalizedPath),
|
||||
mimeType,
|
||||
fileSize: 0,
|
||||
preview: null,
|
||||
filePath: normalizedPath,
|
||||
source: 'message-ref',
|
||||
});
|
||||
};
|
||||
// Deliberately narrow this render-layer fallback to user-facing artifacts.
|
||||
const exts = 'pdf|xlsx?|PDF|XLSX?';
|
||||
const taggedRegex = new RegExp(`(?:^|[\\s(\\[{>])(?:MEDIA|media):((?:\\/|~\\/)[^\\s\\n"'()\\[\\],<>]*?\\.(?:${exts}))`, 'g');
|
||||
const unixRegex = new RegExp('(?<![\\w./:])((?:\\/|~\\/)[^\\s\\n"\'`()\\[\\],<>]*?\\.(?:' + exts + '))', 'g');
|
||||
const skillPathBoundary = '(?=$|\\s|[\\x5b\\x5d"\'`(),<>，。；;,.!?])';
|
||||
const skillPathPart = '[^\\\\/\\s\\n"\'`()\\x5b\\x5d,<>]+';
|
||||
const skillPathTail = '[^\\s\\n"\'`()\\x5b\\x5d,<>]*?';
|
||||
const skillDirRegex = new RegExp(
|
||||
`(?<![\\w./:])((?:~[\\\\/]\\.niancode[\\\\/]skills[\\\\/]${skillPathPart})|(?:(?:\\/|[A-Za-z]:\\\\)${skillPathTail}[\\\\/]\\.niancode[\\\\/]skills[\\\\/]${skillPathPart}))${skillPathBoundary}`,
|
||||
'gi',
|
||||
);
|
||||
const skillMarkdownRegex = new RegExp(
|
||||
`(?<![\\w./:])((?:~[\\\\/]\\.niancode[\\\\/]skills[\\\\/]${skillPathTail}\\.md)|(?:(?:\\/|[A-Za-z]:\\\\)${skillPathTail}[\\\\/]\\.niancode[\\\\/]skills[\\\\/]${skillPathTail}\\.md))${skillPathBoundary}`,
|
||||
'gi',
|
||||
);
|
||||
|
||||
let workingText = text;
|
||||
let taggedMatch: RegExpExecArray | null;
|
||||
while ((taggedMatch = taggedRegex.exec(text)) !== null) {
|
||||
const filePath = taggedMatch[1];
|
||||
const mimeType = previewMimeFromPath(filePath);
|
||||
if (mimeType) pushRef(filePath, mimeType);
|
||||
const start = taggedMatch.index;
|
||||
const end = start + taggedMatch[0].length;
|
||||
workingText = workingText.slice(0, start) + ' '.repeat(end - start) + workingText.slice(end);
|
||||
}
|
||||
|
||||
for (const regex of [unixRegex, skillMarkdownRegex, skillDirRegex]) {
|
||||
let match: RegExpExecArray | null;
|
||||
while ((match = regex.exec(workingText)) !== null) {
|
||||
const filePath = match[1];
|
||||
const mimeType = regex === skillDirRegex ? DIRECTORY_MIME_TYPE : previewMimeFromPath(filePath);
|
||||
if (mimeType) pushRef(filePath, mimeType);
|
||||
}
|
||||
}
|
||||
|
||||
return refs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize LaTeX delimiters so `remark-math` can detect them.
|
||||
*
|
||||
* Many LLMs emit LaTeX using `\(` / `\)` for inline math and `\[` / `\]`
|
||||
* for block math (OpenAI style), which are NOT recognized by remark-math.
|
||||
* remark-math only parses `$...$` and `$$...$$`.
|
||||
*
|
||||
* We convert the backslash-paren/bracket forms to dollar-sign forms so the
|
||||
* math is rendered regardless of which convention the model uses.
|
||||
*
|
||||
* Transformations are skipped inside fenced/inline code spans to avoid
|
||||
* clobbering code samples that legitimately contain `\(` etc.
|
||||
*/
|
||||
function normalizeLatexDelimiters(input: string): string {
|
||||
if (!input || (input.indexOf('\\(') === -1 && input.indexOf('\\[') === -1)) {
|
||||
return input;
|
||||
}
|
||||
|
||||
const parts = input.split(/(```[\s\S]*?```|`[^`\n]*`)/g);
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
const part = parts[i];
|
||||
if (!part) continue;
|
||||
if (part.startsWith('```') || part.startsWith('`')) continue;
|
||||
let next = part.replace(/\\\[([\s\S]+?)\\\]/g, (_m, body: string) => `\n$$\n${body.trim()}\n$$\n`);
|
||||
next = next.replace(/\\\(([\s\S]+?)\\\)/g, (_m, body: string) => `$${body}$`);
|
||||
parts[i] = next;
|
||||
}
|
||||
return parts.join('');
|
||||
}
|
||||
|
||||
/** Resolve an ExtractedImage to a displayable src string, or null if not possible. */
|
||||
function imageSrc(img: ExtractedImage): string | null {
|
||||
if (img.url) return img.url;
|
||||
if (img.data) return `data:${img.mimeType};base64,${img.data}`;
|
||||
return null;
|
||||
}
|
||||
|
||||
export const ChatMessage = memo(function ChatMessage({
|
||||
message,
|
||||
messageKey,
|
||||
showTimestamps = true,
|
||||
expandedToolIds = EMPTY_TOOL_IDS,
|
||||
onToolExpandedChange,
|
||||
assistantAvatarSrc,
|
||||
assistantAvatarAlt = '',
|
||||
textOverride,
|
||||
suppressToolCards = false,
|
||||
suppressProcessAttachments = false,
|
||||
suppressAssistantText = false,
|
||||
isStreaming = false,
|
||||
streamingTools = [],
|
||||
onOpenFile,
|
||||
}: ChatMessageProps) {
|
||||
const isUser = message.role === 'user';
|
||||
const deliveryStatus = isUser ? message._deliveryStatus : undefined;
|
||||
const role = typeof message.role === 'string' ? message.role.toLowerCase() : '';
|
||||
const isToolResult = role === 'toolresult' || role === 'tool_result';
|
||||
const text = textOverride ?? extractText(message);
|
||||
// When text is folded into an ExecutionGraphCard, treat the message as
|
||||
// having no text for rendering purposes. Keeping this behind a flag (vs
|
||||
// blanking `text` outright) lets future hover affordances still read the
|
||||
// original content without surfacing the bubble.
|
||||
const hideAssistantText = suppressAssistantText && !isUser;
|
||||
const hasText = !hideAssistantText && text.trim().length > 0;
|
||||
const images = extractImages(message);
|
||||
const tools = extractToolUse(message);
|
||||
const visibleTools = suppressToolCards ? [] : tools;
|
||||
const stableMessageKey = messageKey?.trim()
|
||||
? messageKey
|
||||
: (message.id?.trim() ? message.id : undefined);
|
||||
const [validatedPaths, setValidatedPaths] = useState<Record<string, boolean>>({});
|
||||
const rawAttachedFiles = message._attachedFiles || [];
|
||||
const textPreviewFiles = isUser ? [] : extractPreviewDocumentPaths(text);
|
||||
const rawAttachedPaths = new Set(rawAttachedFiles.map((file) => file.filePath).filter(Boolean));
|
||||
const derivedAttachedFiles = [
|
||||
...rawAttachedFiles,
|
||||
...textPreviewFiles.filter((file) => !file.filePath || !rawAttachedPaths.has(file.filePath)),
|
||||
];
|
||||
const validationTargets = derivedAttachedFiles
|
||||
.map((file) => {
|
||||
const kind = validationKindForAttachment(file);
|
||||
return kind && file.filePath ? { filePath: file.filePath, kind } : null;
|
||||
})
|
||||
.filter((target): target is { filePath: string; kind: 'file' | 'dir' } => !!target);
|
||||
const validationKey = validationTargets
|
||||
.map((target) => `${target.kind}:${target.filePath}`)
|
||||
.sort()
|
||||
.join('\n');
|
||||
useEffect(() => {
|
||||
if (!validationKey) return;
|
||||
const pendingTargets = validationTargets.filter((target) => validatedPaths[target.filePath] === undefined);
|
||||
if (pendingTargets.length === 0) return;
|
||||
|
||||
let cancelled = false;
|
||||
void Promise.all(
|
||||
pendingTargets.map(async (target) => {
|
||||
try {
|
||||
const stat = await statFile(target.filePath);
|
||||
return {
|
||||
filePath: target.filePath,
|
||||
exists: !!stat.ok && (target.kind === 'dir' ? !!stat.isDir : !!stat.isFile),
|
||||
};
|
||||
} catch {
|
||||
return { filePath: target.filePath, exists: false };
|
||||
}
|
||||
}),
|
||||
).then((results) => {
|
||||
if (cancelled) return;
|
||||
setValidatedPaths((current) => {
|
||||
const next = { ...current };
|
||||
for (const result of results) next[result.filePath] = result.exists;
|
||||
return next;
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [validationKey, validationTargets, validatedPaths]);
|
||||
const existingDerivedAttachedFiles = derivedAttachedFiles.filter((file) => {
|
||||
const kind = validationKindForAttachment(file);
|
||||
if (!kind || !file.filePath) return true;
|
||||
return validatedPaths[file.filePath] === true;
|
||||
});
|
||||
const filteredProcessAttachments = derivedAttachedFiles.filter((file) => {
|
||||
if (file.source !== 'tool-result' && file.source !== 'message-ref') return true;
|
||||
// Runtime-produced user-facing artifacts (images, PDFs, spreadsheets,
|
||||
// skill directories, ...) must remain visible in the reply bubble even
|
||||
// when generic process attachments are folded into the execution graph.
|
||||
// The graph card itself does not render `_attachedFiles`, so dropping
|
||||
// images here would leave the user with no way to see them at all.
|
||||
if (file.mimeType.startsWith('image/')) return true;
|
||||
return isChatPreviewDocument(file) || isDirectoryAttachment(file);
|
||||
});
|
||||
// When a message is attachment-only, keep those attachments visible even if
|
||||
// process attachments are generally suppressed for this run segment —
|
||||
// otherwise the reply disappears entirely.
|
||||
const processVisibleAttachments = filteredProcessAttachments.filter((file) => {
|
||||
const kind = validationKindForAttachment(file);
|
||||
if (!kind || !file.filePath) return true;
|
||||
return validatedPaths[file.filePath] === true;
|
||||
});
|
||||
const attachedFiles = normalizeRenderableAttachments(suppressProcessAttachments && (hasText || images.length > 0 || visibleTools.length > 0)
|
||||
? processVisibleAttachments
|
||||
: existingDerivedAttachedFiles);
|
||||
const [lightboxImg, setLightboxImg] = useState<{ src: string; fileName: string; filePath?: string; base64?: string; mimeType?: string } | null>(null);
|
||||
|
||||
// Never render tool result messages in chat UI
|
||||
if (isToolResult) return null;
|
||||
|
||||
const hasStreamingToolStatus = isStreaming && streamingTools.length > 0;
|
||||
if (!hasText && images.length === 0 && visibleTools.length === 0 && attachedFiles.length === 0 && !hasStreamingToolStatus) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex group',
|
||||
isUser ? 'flex-row-reverse gap-0' : 'flex-row gap-3',
|
||||
)}
|
||||
>
|
||||
{/* Avatar */}
|
||||
{!isUser && (
|
||||
<div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md border-2 border-[#26384D] bg-[#E9EFF5] text-[#26384D] shadow-[2px_2px_0_#26384D]">
|
||||
{assistantAvatarSrc ? (
|
||||
<img src={assistantAvatarSrc} alt={assistantAvatarAlt} className="h-full w-full object-cover [image-rendering:pixelated]" />
|
||||
) : (
|
||||
<Sparkles className="h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col w-full min-w-0 max-w-[80%] space-y-2',
|
||||
isUser ? 'items-end' : 'items-start',
|
||||
)}
|
||||
>
|
||||
{isStreaming && !isUser && streamingTools.length > 0 && (
|
||||
<ToolStatusBar tools={streamingTools} />
|
||||
)}
|
||||
|
||||
{/* Tool use cards */}
|
||||
{visibleTools.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
{visibleTools.map((tool, i) => (
|
||||
<ToolCard
|
||||
key={getToolVisibilityId(stableMessageKey, tool.id, i)}
|
||||
id={getToolVisibilityId(stableMessageKey, tool.id, i)}
|
||||
name={tool.name}
|
||||
input={tool.input}
|
||||
expanded={expandedToolIds.has(
|
||||
getToolVisibilityId(stableMessageKey, tool.id, i),
|
||||
)}
|
||||
onExpandedChange={onToolExpandedChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Images — rendered ABOVE text bubble for user messages */}
|
||||
{/* Images from content blocks */}
|
||||
{isUser && images.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{images.map((img, i) => {
|
||||
const src = imageSrc(img);
|
||||
if (!src) return null;
|
||||
return (
|
||||
<ImageThumbnail
|
||||
key={`content-${i}`}
|
||||
src={src}
|
||||
fileName="image"
|
||||
base64={img.data}
|
||||
mimeType={img.mimeType}
|
||||
onPreview={() => setLightboxImg({ src, fileName: 'image', base64: img.data, mimeType: img.mimeType })}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File attachments — images above text for user, file cards below */}
|
||||
{isUser && attachedFiles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{attachedFiles.map((file, i) => {
|
||||
const isImage = file.mimeType.startsWith('image/');
|
||||
// Skip image attachments if we already have images from content blocks
|
||||
if (isImage && images.length > 0) return null;
|
||||
if (isImage && file.preview) {
|
||||
return (
|
||||
<ImageThumbnail
|
||||
key={`local-${i}`}
|
||||
src={file.preview}
|
||||
fileName={file.fileName}
|
||||
filePath={file.filePath}
|
||||
mimeType={file.mimeType}
|
||||
onPreview={() => setLightboxImg({ src: file.preview!, fileName: file.fileName, filePath: file.filePath, mimeType: file.mimeType })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
// Non-image files → file card
|
||||
return <FileCard key={`local-${i}`} file={file} onOpen={onOpenFile} />;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main text bubble */}
|
||||
{hasText && (
|
||||
<MessageBubble
|
||||
text={text}
|
||||
isUser={isUser}
|
||||
isStreaming={isStreaming}
|
||||
deliveryStatus={deliveryStatus}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Images from content blocks — assistant messages (below text) */}
|
||||
{!isUser && images.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{images.map((img, i) => {
|
||||
const src = imageSrc(img);
|
||||
if (!src) return null;
|
||||
return (
|
||||
<ImagePreviewCard
|
||||
key={`content-${i}`}
|
||||
src={src}
|
||||
fileName="image"
|
||||
base64={img.data}
|
||||
mimeType={img.mimeType}
|
||||
onPreview={() => setLightboxImg({ src, fileName: 'image', base64: img.data, mimeType: img.mimeType })}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File attachments — assistant messages (below text) */}
|
||||
{!isUser && attachedFiles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{attachedFiles.map((file, i) => {
|
||||
const isImage = file.mimeType.startsWith('image/');
|
||||
if (isImage && images.length > 0) return null;
|
||||
if (isImage && file.preview) {
|
||||
return (
|
||||
<ImagePreviewCard
|
||||
key={`local-${i}`}
|
||||
src={file.preview}
|
||||
fileName={file.fileName}
|
||||
filePath={file.filePath}
|
||||
mimeType={file.mimeType}
|
||||
onPreview={() => setLightboxImg({ src: file.preview!, fileName: file.fileName, filePath: file.filePath, mimeType: file.mimeType })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <FileCard key={`local-${i}`} file={file} onOpen={onOpenFile} />;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hover row for user messages — timestamp only */}
|
||||
{isUser && showTimestamps && message.timestamp && (
|
||||
<span className="text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-200 select-none">
|
||||
{formatTimestamp(message.timestamp)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Hover row for assistant messages — only when there is real text content */}
|
||||
{!isUser && hasText && (
|
||||
<AssistantHoverBar
|
||||
text={text}
|
||||
timestamp={showTimestamps ? message.timestamp : undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Image lightbox portal */}
|
||||
{lightboxImg && (
|
||||
<ImageLightbox
|
||||
src={lightboxImg.src}
|
||||
fileName={lightboxImg.fileName}
|
||||
filePath={lightboxImg.filePath}
|
||||
base64={lightboxImg.base64}
|
||||
mimeType={lightboxImg.mimeType}
|
||||
onClose={() => setLightboxImg(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
function formatDuration(durationMs?: number): string | null {
|
||||
if (!durationMs || !Number.isFinite(durationMs)) return null;
|
||||
if (durationMs < 1000) return `${Math.round(durationMs)}ms`;
|
||||
return `${(durationMs / 1000).toFixed(1)}s`;
|
||||
}
|
||||
|
||||
function ToolStatusBar({
|
||||
tools,
|
||||
}: {
|
||||
tools: Array<{
|
||||
id?: string;
|
||||
toolCallId?: string;
|
||||
name: string;
|
||||
status: 'running' | 'completed' | 'error';
|
||||
durationMs?: number;
|
||||
summary?: string;
|
||||
}>;
|
||||
}) {
|
||||
return (
|
||||
<div className="w-full space-y-1">
|
||||
{tools.map((tool) => {
|
||||
const duration = formatDuration(tool.durationMs);
|
||||
const isRunning = tool.status === 'running';
|
||||
const isError = tool.status === 'error';
|
||||
return (
|
||||
<div
|
||||
key={tool.toolCallId || tool.id || tool.name}
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-lg border px-3 py-2 text-xs transition-colors',
|
||||
isRunning && 'border-primary/30 bg-primary/5 text-foreground',
|
||||
!isRunning && !isError && 'border-border/50 bg-muted/20 text-muted-foreground',
|
||||
isError && 'border-destructive/30 bg-destructive/5 text-destructive',
|
||||
)}
|
||||
>
|
||||
{isRunning && <Loader2 className="h-3.5 w-3.5 animate-spin text-primary shrink-0" />}
|
||||
{!isRunning && !isError && <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />}
|
||||
{isError && <AlertCircle className="h-3.5 w-3.5 text-destructive shrink-0" />}
|
||||
<Wrench className="h-3 w-3 shrink-0 opacity-60" />
|
||||
<span className="font-mono text-xs font-medium">{tool.name}</span>
|
||||
{duration && <span className="text-tiny opacity-60">{tool.summary ? `(${duration})` : duration}</span>}
|
||||
{tool.summary && (
|
||||
<span className="truncate text-tiny opacity-70">{tool.summary}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Assistant hover bar (timestamp + copy, shown on group hover) ─
|
||||
|
||||
function AssistantHoverBar({ text, timestamp }: { text: string; timestamp?: number }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const copyContent = useCallback(() => {
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}, [text]);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between w-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 select-none px-1">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{timestamp ? formatTimestamp(timestamp) : ''}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6"
|
||||
onClick={copyContent}
|
||||
>
|
||||
{copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Message Bubble ──────────────────────────────────────────────
|
||||
|
||||
function MessageBubble({
|
||||
text,
|
||||
isUser,
|
||||
isStreaming,
|
||||
deliveryStatus,
|
||||
}: {
|
||||
text: string;
|
||||
isUser: boolean;
|
||||
isStreaming: boolean;
|
||||
deliveryStatus?: RawMessage['_deliveryStatus'];
|
||||
}) {
|
||||
const deliveryLabel = deliveryStatus === 'queued'
|
||||
? 'Queued'
|
||||
: deliveryStatus === 'sending'
|
||||
? 'Sending'
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid={isUser ? 'chat-message-bubble-user' : 'chat-message-bubble-assistant'}
|
||||
className={cn(
|
||||
'relative rounded-lg border-2 border-[#26384D] px-4 py-3 shadow-[3px_3px_0_#26384D]',
|
||||
!isUser && 'w-full',
|
||||
isUser
|
||||
? 'bg-[#DCE6EF] text-[#26384D]'
|
||||
: 'bg-[#FFFFFF] text-[#26384D]',
|
||||
)}
|
||||
>
|
||||
{isUser ? (
|
||||
<>
|
||||
{deliveryLabel && (
|
||||
<div
|
||||
className="mb-2 flex items-center justify-end gap-1.5 text-[11px] font-medium leading-none text-[#26384D]/70"
|
||||
data-testid={`message-delivery-${deliveryStatus}`}
|
||||
>
|
||||
{deliveryStatus === 'sending' ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<Clock3 className="h-3 w-3" />
|
||||
)}
|
||||
<span>{deliveryLabel}</span>
|
||||
</div>
|
||||
)}
|
||||
<p className="whitespace-pre-wrap break-words break-all text-sm">{text}</p>
|
||||
</>
|
||||
) : (
|
||||
<div className="prose prose-sm max-w-none break-words break-all text-[#26384D]">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[[rehypeKatex, { strict: false, throwOnError: false, output: 'html' }]]}
|
||||
components={{
|
||||
code({ className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const isInline = !match && !className;
|
||||
if (isInline) {
|
||||
return (
|
||||
<code className="bg-background/50 px-1.5 py-0.5 rounded text-sm font-mono break-words break-all" {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<pre className="bg-background/50 rounded-lg p-4 overflow-x-auto">
|
||||
<code className={cn('text-sm font-mono', className)} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
</pre>
|
||||
);
|
||||
},
|
||||
a({ href, children }) {
|
||||
return (
|
||||
<a href={href} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-words break-all">
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{normalizeLatexDelimiters(text)}
|
||||
</ReactMarkdown>
|
||||
{isStreaming && (
|
||||
<span className="inline-block w-2 h-4 bg-foreground/50 animate-pulse ml-0.5" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── File Card (for user-uploaded non-image files) ───────────────
|
||||
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
||||
}
|
||||
|
||||
function FileIcon({ mimeType, className }: { mimeType: string; className?: string }) {
|
||||
if (mimeType === DIRECTORY_MIME_TYPE) return <FolderOpen className={className} />;
|
||||
if (mimeType.startsWith('audio/')) return <Music className={className} />;
|
||||
if (mimeType.startsWith('text/') || mimeType === 'application/json' || mimeType === 'application/xml') return <FileText className={className} />;
|
||||
if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive') || mimeType.includes('tar') || mimeType.includes('rar') || mimeType.includes('7z')) return <FileArchive className={className} />;
|
||||
if (mimeType === 'application/pdf') return <FileText className={className} />;
|
||||
return <File className={className} />;
|
||||
}
|
||||
|
||||
function FileCard({ file, onOpen }: { file: AttachedFileMeta; onOpen?: (file: AttachedFileMeta) => void }) {
|
||||
const handleOpen = useCallback(() => {
|
||||
if (!file.filePath) return;
|
||||
if (onOpen) {
|
||||
onOpen(file);
|
||||
} else {
|
||||
invokeIpc('shell:openPath', file.filePath);
|
||||
}
|
||||
}, [file, onOpen]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-xl border border-black/10 dark:border-white/10 px-3 py-2.5 bg-black/5 dark:bg-white/5 max-w-[220px]",
|
||||
file.filePath && "cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
|
||||
)}
|
||||
onClick={handleOpen}
|
||||
title={file.filePath ? "Open file" : undefined}
|
||||
>
|
||||
<FileIcon mimeType={file.mimeType} className="h-5 w-5 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0 overflow-hidden">
|
||||
<p className="text-xs font-medium truncate">{file.fileName}</p>
|
||||
<p className="text-2xs text-muted-foreground">
|
||||
{file.mimeType === DIRECTORY_MIME_TYPE ? 'Folder' : file.fileSize > 0 ? formatFileSize(file.fileSize) : 'File'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Image Thumbnail (user bubble — square crop with zoom hint) ──
|
||||
|
||||
function ImageThumbnail({
|
||||
src,
|
||||
fileName,
|
||||
filePath,
|
||||
base64,
|
||||
mimeType,
|
||||
onPreview,
|
||||
}: {
|
||||
src: string;
|
||||
fileName: string;
|
||||
filePath?: string;
|
||||
base64?: string;
|
||||
mimeType?: string;
|
||||
onPreview: () => void;
|
||||
}) {
|
||||
void filePath; void base64; void mimeType;
|
||||
return (
|
||||
<div
|
||||
className="relative w-36 h-36 rounded-xl border overflow-hidden border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 group/img cursor-zoom-in"
|
||||
onClick={onPreview}
|
||||
>
|
||||
<img src={src} alt={fileName} className="w-full h-full object-cover" />
|
||||
<div className="absolute inset-0 bg-black/0 group-hover/img:bg-black/25 transition-colors flex items-center justify-center">
|
||||
<ZoomIn className="h-6 w-6 text-white opacity-0 group-hover/img:opacity-100 transition-opacity drop-shadow" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Image Preview Card (assistant bubble — natural size with overlay actions) ──
|
||||
|
||||
function ImagePreviewCard({
|
||||
src,
|
||||
fileName,
|
||||
filePath,
|
||||
base64,
|
||||
mimeType,
|
||||
onPreview,
|
||||
}: {
|
||||
src: string;
|
||||
fileName: string;
|
||||
filePath?: string;
|
||||
base64?: string;
|
||||
mimeType?: string;
|
||||
onPreview: () => void;
|
||||
}) {
|
||||
void filePath; void base64; void mimeType;
|
||||
return (
|
||||
<div
|
||||
className="relative max-w-xs rounded-xl border overflow-hidden border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 group/img cursor-zoom-in"
|
||||
onClick={onPreview}
|
||||
>
|
||||
<img src={src} alt={fileName} className="block w-full" />
|
||||
<div className="absolute inset-0 bg-black/0 group-hover/img:bg-black/20 transition-colors flex items-center justify-center">
|
||||
<ZoomIn className="h-6 w-6 text-white opacity-0 group-hover/img:opacity-100 transition-opacity drop-shadow" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Image Lightbox ───────────────────────────────────────────────
|
||||
|
||||
function ImageLightbox({
|
||||
src,
|
||||
fileName,
|
||||
filePath,
|
||||
base64,
|
||||
mimeType,
|
||||
onClose,
|
||||
}: {
|
||||
src: string;
|
||||
fileName: string;
|
||||
filePath?: string;
|
||||
base64?: string;
|
||||
mimeType?: string;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
void src; void base64; void mimeType; void fileName;
|
||||
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
window.addEventListener('keydown', handleKey);
|
||||
return () => window.removeEventListener('keydown', handleKey);
|
||||
}, [onClose]);
|
||||
|
||||
const handleShowInFolder = useCallback(() => {
|
||||
if (filePath) {
|
||||
invokeIpc('shell:showItemInFolder', filePath);
|
||||
}
|
||||
}, [filePath]);
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
>
|
||||
{/* Image + buttons stacked */}
|
||||
<div
|
||||
className="flex flex-col items-center gap-3"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<img
|
||||
src={src}
|
||||
alt={fileName}
|
||||
className="max-w-[90vw] max-h-[85vh] rounded-lg shadow-2xl object-contain"
|
||||
/>
|
||||
|
||||
{/* Action buttons below image */}
|
||||
<div className="flex items-center gap-2">
|
||||
{filePath && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 bg-white/10 hover:bg-white/20 text-white"
|
||||
onClick={handleShowInFolder}
|
||||
title="在文件夹中显示"
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 bg-white/10 hover:bg-white/20 text-white"
|
||||
onClick={onClose}
|
||||
title="关闭"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
|
||||
// ── Tool Card ───────────────────────────────────────────────────
|
||||
|
||||
interface ToolCardProps {
|
||||
id: string;
|
||||
name: string;
|
||||
input: unknown;
|
||||
expanded: boolean;
|
||||
onExpandedChange?: (id: string, expanded: boolean) => void;
|
||||
}
|
||||
|
||||
function ToolCard({
|
||||
id,
|
||||
name,
|
||||
input,
|
||||
expanded,
|
||||
onExpandedChange,
|
||||
}: ToolCardProps) {
|
||||
return (
|
||||
<div className="rounded-xl border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-sm">
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={expanded}
|
||||
aria-label={`工具 ${name}`}
|
||||
className="flex items-center gap-2 w-full px-3 py-1.5 text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={() => onExpandedChange?.(id, !expanded)}
|
||||
>
|
||||
<CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
|
||||
<Wrench className="h-3 w-3 shrink-0 opacity-60" />
|
||||
<span className="font-mono text-xs">{name}</span>
|
||||
{expanded
|
||||
? <ChevronDown className="h-3 w-3 ml-auto" />
|
||||
: <ChevronRight className="h-3 w-3 ml-auto" />}
|
||||
</button>
|
||||
{expanded && input != null && (
|
||||
<pre className="px-3 pb-2 text-xs text-muted-foreground overflow-x-auto">
|
||||
{typeof input === 'string' ? input : JSON.stringify(input, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user