first commit
This commit is contained in:
406
frontend/components/ChatPanel.tsx
Normal file
406
frontend/components/ChatPanel.tsx
Normal file
@@ -0,0 +1,406 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import MarkdownMessage from "@/components/MarkdownMessage";
|
||||
import { sendChatMessage } from "@/lib/api";
|
||||
import {
|
||||
parseJsonSafely,
|
||||
splitSseEvents,
|
||||
type TencentErrorEvent,
|
||||
type TencentReplyEvent,
|
||||
} from "@/lib/tencentSse";
|
||||
import type { ChatMessage } from "@/types/mindmap";
|
||||
|
||||
type TriggerRequest = {
|
||||
id: number;
|
||||
content: string;
|
||||
};
|
||||
|
||||
type ChatPanelProps = {
|
||||
sessionId: string;
|
||||
triggerRequest?: TriggerRequest;
|
||||
onClose?: () => void;
|
||||
};
|
||||
|
||||
const TYPING_INTERVAL_MS = 24;
|
||||
|
||||
export default function ChatPanel({
|
||||
sessionId,
|
||||
triggerRequest,
|
||||
onClose,
|
||||
}: ChatPanelProps) {
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const typingTimerRef = useRef<number | null>(null);
|
||||
const pendingCleanupTimerRef = useRef<number | null>(null);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
const assistantTargetRef = useRef("");
|
||||
const assistantDisplayedRef = useRef("");
|
||||
const streamCompleteRef = useRef(false);
|
||||
const handledTriggerIdRef = useRef<number | null>(null);
|
||||
|
||||
const scrollToBottom = useCallback(() => {
|
||||
messagesEndRef.current?.scrollIntoView({
|
||||
behavior: loading ? "auto" : "smooth",
|
||||
block: "end",
|
||||
});
|
||||
}, [loading]);
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages, scrollToBottom]);
|
||||
|
||||
const cancelPendingCleanup = useCallback(() => {
|
||||
if (pendingCleanupTimerRef.current !== null) {
|
||||
window.clearTimeout(pendingCleanupTimerRef.current);
|
||||
pendingCleanupTimerRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const abortInFlightRequest = useCallback(() => {
|
||||
abortControllerRef.current?.abort();
|
||||
abortControllerRef.current = null;
|
||||
}, []);
|
||||
|
||||
const updateAssistantMessage = useCallback((content: string) => {
|
||||
setMessages((prev) => {
|
||||
const next = [...prev];
|
||||
const lastMessage = next[next.length - 1];
|
||||
|
||||
if (!lastMessage || lastMessage.role !== "assistant") {
|
||||
next.push({ role: "assistant", content });
|
||||
return next;
|
||||
}
|
||||
|
||||
next[next.length - 1] = {
|
||||
...lastMessage,
|
||||
content,
|
||||
};
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const stopTypingAnimation = useCallback(() => {
|
||||
if (typingTimerRef.current !== null) {
|
||||
window.clearInterval(typingTimerRef.current);
|
||||
typingTimerRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getTypingStep = useCallback((remaining: number) => {
|
||||
if (remaining > 160) return 10;
|
||||
if (remaining > 80) return 7;
|
||||
if (remaining > 36) return 4;
|
||||
if (remaining > 12) return 2;
|
||||
return 1;
|
||||
}, []);
|
||||
|
||||
const ensureTypingAnimation = useCallback(() => {
|
||||
if (typingTimerRef.current !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
typingTimerRef.current = window.setInterval(() => {
|
||||
const current = assistantDisplayedRef.current;
|
||||
const target = assistantTargetRef.current;
|
||||
|
||||
if (current === target) {
|
||||
if (streamCompleteRef.current) {
|
||||
stopTypingAnimation();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const remaining = target.length - current.length;
|
||||
const nextLength = current.length + getTypingStep(remaining);
|
||||
const nextContent = target.slice(0, nextLength);
|
||||
assistantDisplayedRef.current = nextContent;
|
||||
updateAssistantMessage(nextContent);
|
||||
|
||||
if (nextContent === target && streamCompleteRef.current) {
|
||||
stopTypingAnimation();
|
||||
}
|
||||
}, TYPING_INTERVAL_MS);
|
||||
}, [getTypingStep, stopTypingAnimation, updateAssistantMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
cancelPendingCleanup();
|
||||
|
||||
return () => {
|
||||
pendingCleanupTimerRef.current = window.setTimeout(() => {
|
||||
abortInFlightRequest();
|
||||
stopTypingAnimation();
|
||||
pendingCleanupTimerRef.current = null;
|
||||
}, 0);
|
||||
};
|
||||
}, [abortInFlightRequest, cancelPendingCleanup, stopTypingAnimation]);
|
||||
|
||||
const resetStreamingState = useCallback(() => {
|
||||
cancelPendingCleanup();
|
||||
abortInFlightRequest();
|
||||
stopTypingAnimation();
|
||||
assistantTargetRef.current = "";
|
||||
assistantDisplayedRef.current = "";
|
||||
streamCompleteRef.current = false;
|
||||
}, [abortInFlightRequest, cancelPendingCleanup, stopTypingAnimation]);
|
||||
|
||||
const mergeIncomingContent = useCallback((currentTarget: string, incomingContent: string) => {
|
||||
if (!currentTarget) {
|
||||
return incomingContent;
|
||||
}
|
||||
|
||||
if (!incomingContent) {
|
||||
return currentTarget;
|
||||
}
|
||||
|
||||
if (incomingContent.startsWith(currentTarget)) {
|
||||
return incomingContent;
|
||||
}
|
||||
|
||||
if (currentTarget.startsWith(incomingContent)) {
|
||||
return currentTarget;
|
||||
}
|
||||
|
||||
const maxOverlap = Math.min(currentTarget.length, incomingContent.length);
|
||||
for (let overlap = maxOverlap; overlap > 0; overlap -= 1) {
|
||||
if (currentTarget.slice(-overlap) === incomingContent.slice(0, overlap)) {
|
||||
return `${currentTarget}${incomingContent.slice(overlap)}`;
|
||||
}
|
||||
}
|
||||
|
||||
return incomingContent.length > currentTarget.length ? incomingContent : currentTarget;
|
||||
}, []);
|
||||
|
||||
const setAssistantTarget = useCallback(
|
||||
(incomingContent: string) => {
|
||||
assistantTargetRef.current = mergeIncomingContent(
|
||||
assistantTargetRef.current,
|
||||
incomingContent,
|
||||
);
|
||||
ensureTypingAnimation();
|
||||
},
|
||||
[ensureTypingAnimation, mergeIncomingContent],
|
||||
);
|
||||
|
||||
const processStreamResponse = useCallback(
|
||||
async (response: Response) => {
|
||||
const reader = response.body?.getReader();
|
||||
if (!reader) {
|
||||
throw new Error("No response body");
|
||||
}
|
||||
|
||||
const decoder = new TextDecoder("utf-8");
|
||||
let buffer = "";
|
||||
|
||||
const handleReplyEvent = (event: TencentReplyEvent | null) => {
|
||||
const payload = event?.payload;
|
||||
if (!payload || payload.is_from_self || typeof payload.content !== "string") {
|
||||
return;
|
||||
}
|
||||
|
||||
setAssistantTarget(payload.content);
|
||||
|
||||
if (payload.is_final) {
|
||||
streamCompleteRef.current = true;
|
||||
ensureTypingAnimation();
|
||||
}
|
||||
};
|
||||
|
||||
const handleErrorEvent = (event: TencentErrorEvent | null) => {
|
||||
const errorMessage =
|
||||
event?.error?.message ?? event?.message ?? "Unknown streaming error";
|
||||
assistantTargetRef.current = `错误: ${errorMessage}`;
|
||||
assistantDisplayedRef.current = assistantTargetRef.current;
|
||||
streamCompleteRef.current = true;
|
||||
updateAssistantMessage(assistantTargetRef.current);
|
||||
stopTypingAnimation();
|
||||
};
|
||||
|
||||
const handleSseEvent = (eventName: string, data: string) => {
|
||||
const normalizedEventName =
|
||||
parseJsonSafely<{ type?: string }>(data)?.type ?? eventName;
|
||||
|
||||
if (normalizedEventName === "reply") {
|
||||
handleReplyEvent(parseJsonSafely<TencentReplyEvent>(data));
|
||||
return;
|
||||
}
|
||||
|
||||
if (normalizedEventName === "error") {
|
||||
handleErrorEvent(parseJsonSafely<TencentErrorEvent>(data));
|
||||
}
|
||||
};
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) {
|
||||
buffer += decoder.decode();
|
||||
} else {
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
}
|
||||
|
||||
const { events, rest } = splitSseEvents(buffer);
|
||||
buffer = rest;
|
||||
|
||||
for (const event of events) {
|
||||
handleSseEvent(event.event, event.data);
|
||||
}
|
||||
|
||||
if (done) {
|
||||
if (buffer.trim()) {
|
||||
const { events: tailEvents } = splitSseEvents(`${buffer}\n\n`);
|
||||
for (const event of tailEvents) {
|
||||
handleSseEvent(event.event, event.data);
|
||||
}
|
||||
}
|
||||
streamCompleteRef.current = true;
|
||||
ensureTypingAnimation();
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
[ensureTypingAnimation, setAssistantTarget, stopTypingAnimation, updateAssistantMessage],
|
||||
);
|
||||
|
||||
const sendMessage = useCallback(
|
||||
async (content: string) => {
|
||||
if (!content.trim() || loading) return;
|
||||
|
||||
resetStreamingState();
|
||||
const abortController = new AbortController();
|
||||
abortControllerRef.current = abortController;
|
||||
const userMessage: ChatMessage = { role: "user", content };
|
||||
const assistantMessage: ChatMessage = { role: "assistant", content: "" };
|
||||
setMessages((prev) => [...prev, userMessage, assistantMessage]);
|
||||
setInput("");
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await sendChatMessage(
|
||||
sessionId,
|
||||
content,
|
||||
"default_visitor",
|
||||
abortController.signal,
|
||||
);
|
||||
await processStreamResponse(response);
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === "AbortError") {
|
||||
return;
|
||||
}
|
||||
|
||||
const errorMessage = err instanceof Error ? err.message : "请求失败";
|
||||
assistantTargetRef.current = `错误: ${errorMessage}`;
|
||||
assistantDisplayedRef.current = assistantTargetRef.current;
|
||||
streamCompleteRef.current = true;
|
||||
updateAssistantMessage(assistantTargetRef.current);
|
||||
stopTypingAnimation();
|
||||
} finally {
|
||||
if (abortControllerRef.current === abortController) {
|
||||
abortControllerRef.current = null;
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[loading, processStreamResponse, resetStreamingState, sessionId, stopTypingAnimation, updateAssistantMessage],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!triggerRequest) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (handledTriggerIdRef.current === triggerRequest.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
handledTriggerIdRef.current = triggerRequest.id;
|
||||
void sendMessage(triggerRequest.content);
|
||||
}, [triggerRequest, sendMessage]);
|
||||
|
||||
const handleSend = useCallback(async () => {
|
||||
await sendMessage(input);
|
||||
}, [input, sendMessage]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
void handleSend();
|
||||
}
|
||||
},
|
||||
[handleSend],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-h-0 w-full flex-col bg-slate-50">
|
||||
<div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
|
||||
<h2 className="text-sm font-semibold text-slate-700">AI 对话</h2>
|
||||
{onClose ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:border-slate-300 hover:text-slate-900"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0 space-y-3 overflow-y-auto px-4 py-4">
|
||||
{messages.length === 0 && (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-sm text-slate-400">双击思维导图节点开始对话</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{messages.map((msg, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed ${
|
||||
msg.role === "user"
|
||||
? "bg-blue-600 text-white"
|
||||
: "border border-slate-100 bg-white text-slate-700 shadow-sm"
|
||||
}`}
|
||||
>
|
||||
{msg.role === "assistant" ? (
|
||||
msg.content || (loading && idx === messages.length - 1 ? "思考中..." : "") ? (
|
||||
<MarkdownMessage
|
||||
content={msg.content || (loading && idx === messages.length - 1 ? "思考中..." : "")}
|
||||
/>
|
||||
) : null
|
||||
) : (
|
||||
<div className="whitespace-pre-wrap break-words">{msg.content}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200 px-4 py-3">
|
||||
<div className="flex items-end gap-2">
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="输入消息..."
|
||||
rows={1}
|
||||
className="flex-1 resize-none rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-700 placeholder-slate-400 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
|
||||
/>
|
||||
<button
|
||||
onClick={() => void handleSend()}
|
||||
disabled={loading || !input.trim()}
|
||||
className="rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
278
frontend/components/MarkdownMessage.tsx
Normal file
278
frontend/components/MarkdownMessage.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
import React from "react";
|
||||
|
||||
type MarkdownMessageProps = {
|
||||
content: string;
|
||||
};
|
||||
|
||||
type MarkdownBlock =
|
||||
| { type: "paragraph"; content: string }
|
||||
| { type: "heading"; level: number; content: string }
|
||||
| { type: "unordered-list"; items: string[] }
|
||||
| { type: "ordered-list"; items: string[] }
|
||||
| { type: "blockquote"; content: string }
|
||||
| { type: "code"; language: string; content: string };
|
||||
|
||||
export default function MarkdownMessage({ content }: MarkdownMessageProps) {
|
||||
const blocks = parseMarkdown(content);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{blocks.map((block, index) => renderBlock(block, index))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function parseMarkdown(source: string): MarkdownBlock[] {
|
||||
const normalized = source.replace(/\r\n/g, "\n");
|
||||
const lines = normalized.split("\n");
|
||||
const blocks: MarkdownBlock[] = [];
|
||||
let paragraphLines: string[] = [];
|
||||
|
||||
const flushParagraph = () => {
|
||||
if (!paragraphLines.length) return;
|
||||
blocks.push({
|
||||
type: "paragraph",
|
||||
content: paragraphLines.join("\n").trim(),
|
||||
});
|
||||
paragraphLines = [];
|
||||
};
|
||||
|
||||
for (let index = 0; index < lines.length; index += 1) {
|
||||
const line = lines[index];
|
||||
const trimmed = line.trim();
|
||||
|
||||
if (!trimmed) {
|
||||
flushParagraph();
|
||||
continue;
|
||||
}
|
||||
|
||||
const codeFenceMatch = trimmed.match(/^```([^`]*)$/);
|
||||
if (codeFenceMatch) {
|
||||
flushParagraph();
|
||||
const codeLines: string[] = [];
|
||||
let cursor = index + 1;
|
||||
while (cursor < lines.length && !lines[cursor].trim().startsWith("```")) {
|
||||
codeLines.push(lines[cursor]);
|
||||
cursor += 1;
|
||||
}
|
||||
blocks.push({
|
||||
type: "code",
|
||||
language: codeFenceMatch[1].trim(),
|
||||
content: codeLines.join("\n"),
|
||||
});
|
||||
index = cursor;
|
||||
continue;
|
||||
}
|
||||
|
||||
const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
|
||||
if (headingMatch) {
|
||||
flushParagraph();
|
||||
blocks.push({
|
||||
type: "heading",
|
||||
level: headingMatch[1].length,
|
||||
content: headingMatch[2].trim(),
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
const blockquoteMatch = line.match(/^>\s?(.*)$/);
|
||||
if (blockquoteMatch) {
|
||||
flushParagraph();
|
||||
const quoteLines = [blockquoteMatch[1]];
|
||||
let cursor = index + 1;
|
||||
while (cursor < lines.length) {
|
||||
const nextMatch = lines[cursor].match(/^>\s?(.*)$/);
|
||||
if (!nextMatch) break;
|
||||
quoteLines.push(nextMatch[1]);
|
||||
cursor += 1;
|
||||
}
|
||||
blocks.push({
|
||||
type: "blockquote",
|
||||
content: quoteLines.join("\n").trim(),
|
||||
});
|
||||
index = cursor - 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
const unorderedMatch = line.match(/^[-*+]\s+(.+)$/);
|
||||
if (unorderedMatch) {
|
||||
flushParagraph();
|
||||
const items = [unorderedMatch[1].trim()];
|
||||
let cursor = index + 1;
|
||||
while (cursor < lines.length) {
|
||||
const nextMatch = lines[cursor].match(/^[-*+]\s+(.+)$/);
|
||||
if (!nextMatch) break;
|
||||
items.push(nextMatch[1].trim());
|
||||
cursor += 1;
|
||||
}
|
||||
blocks.push({ type: "unordered-list", items });
|
||||
index = cursor - 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
const orderedMatch = line.match(/^\d+\.\s+(.+)$/);
|
||||
if (orderedMatch) {
|
||||
flushParagraph();
|
||||
const items = [orderedMatch[1].trim()];
|
||||
let cursor = index + 1;
|
||||
while (cursor < lines.length) {
|
||||
const nextMatch = lines[cursor].match(/^\d+\.\s+(.+)$/);
|
||||
if (!nextMatch) break;
|
||||
items.push(nextMatch[1].trim());
|
||||
cursor += 1;
|
||||
}
|
||||
blocks.push({ type: "ordered-list", items });
|
||||
index = cursor - 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
paragraphLines.push(line);
|
||||
}
|
||||
|
||||
flushParagraph();
|
||||
return blocks;
|
||||
}
|
||||
|
||||
function renderBlock(block: MarkdownBlock, index: number) {
|
||||
if (block.type === "paragraph") {
|
||||
return (
|
||||
<p key={index} className="whitespace-pre-wrap leading-7 text-inherit">
|
||||
{renderInline(block.content, `p-${index}`)}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "heading") {
|
||||
const sizeClass =
|
||||
block.level === 1
|
||||
? "text-xl font-bold"
|
||||
: block.level === 2
|
||||
? "text-lg font-bold"
|
||||
: "text-base font-semibold";
|
||||
return (
|
||||
<div key={index} className={`${sizeClass} leading-7 text-slate-900`}>
|
||||
{renderInline(block.content, `h-${index}`)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "unordered-list") {
|
||||
return (
|
||||
<ul key={index} className="list-disc space-y-1 pl-5 leading-7 text-inherit">
|
||||
{block.items.map((item, itemIndex) => (
|
||||
<li key={`${index}-${itemIndex}`}>{renderInline(item, `ul-${index}-${itemIndex}`)}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "ordered-list") {
|
||||
return (
|
||||
<ol key={index} className="list-decimal space-y-1 pl-5 leading-7 text-inherit">
|
||||
{block.items.map((item, itemIndex) => (
|
||||
<li key={`${index}-${itemIndex}`}>{renderInline(item, `ol-${index}-${itemIndex}`)}</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
|
||||
if (block.type === "blockquote") {
|
||||
return (
|
||||
<blockquote
|
||||
key={index}
|
||||
className="border-l-4 border-slate-300 bg-slate-50/80 px-4 py-2 text-slate-600"
|
||||
>
|
||||
<div className="whitespace-pre-wrap leading-7">
|
||||
{renderInline(block.content, `q-${index}`)}
|
||||
</div>
|
||||
</blockquote>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={index} className="overflow-hidden rounded-xl border border-slate-200 bg-slate-950">
|
||||
{block.language && (
|
||||
<div className="border-b border-slate-800 px-3 py-2 text-xs uppercase tracking-[0.18em] text-slate-400">
|
||||
{block.language}
|
||||
</div>
|
||||
)}
|
||||
<pre className="overflow-x-auto px-4 py-3 text-sm leading-6 text-slate-100">
|
||||
<code>{block.content}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderInline(text: string, keyPrefix: string): React.ReactNode[] {
|
||||
const pattern = /(\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|`([^`]+)`|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*]+)\*|_([^_]+)_)/g;
|
||||
const nodes: React.ReactNode[] = [];
|
||||
let lastIndex = 0;
|
||||
let matchIndex = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
|
||||
while ((match = pattern.exec(text)) !== null) {
|
||||
const plainText = text.slice(lastIndex, match.index);
|
||||
if (plainText) {
|
||||
nodes.push(...renderPlainText(plainText, `${keyPrefix}-plain-${matchIndex}`));
|
||||
}
|
||||
|
||||
if (match[2] && match[3]) {
|
||||
nodes.push(
|
||||
<a
|
||||
key={`${keyPrefix}-link-${matchIndex}`}
|
||||
href={match[3]}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="font-medium text-blue-600 underline decoration-blue-300 underline-offset-2"
|
||||
>
|
||||
{match[2]}
|
||||
</a>,
|
||||
);
|
||||
} else if (match[4]) {
|
||||
nodes.push(
|
||||
<code
|
||||
key={`${keyPrefix}-code-${matchIndex}`}
|
||||
className="rounded bg-slate-900/90 px-1.5 py-0.5 font-mono text-[0.92em] text-amber-200"
|
||||
>
|
||||
{match[4]}
|
||||
</code>,
|
||||
);
|
||||
} else if (match[5] || match[6]) {
|
||||
nodes.push(
|
||||
<strong key={`${keyPrefix}-strong-${matchIndex}`} className="font-semibold text-slate-900">
|
||||
{match[5] ?? match[6]}
|
||||
</strong>,
|
||||
);
|
||||
} else if (match[7] || match[8]) {
|
||||
nodes.push(
|
||||
<em key={`${keyPrefix}-em-${matchIndex}`} className="italic">
|
||||
{match[7] ?? match[8]}
|
||||
</em>,
|
||||
);
|
||||
}
|
||||
|
||||
lastIndex = match.index + match[0].length;
|
||||
matchIndex += 1;
|
||||
}
|
||||
|
||||
const trailingText = text.slice(lastIndex);
|
||||
if (trailingText) {
|
||||
nodes.push(...renderPlainText(trailingText, `${keyPrefix}-tail`));
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
function renderPlainText(text: string, keyPrefix: string): React.ReactNode[] {
|
||||
return text.split("\n").flatMap((segment, index, array) => {
|
||||
const nodes: React.ReactNode[] = [
|
||||
<React.Fragment key={`${keyPrefix}-${index}`}>{segment}</React.Fragment>,
|
||||
];
|
||||
|
||||
if (index < array.length - 1) {
|
||||
nodes.push(<br key={`${keyPrefix}-br-${index}`} />);
|
||||
}
|
||||
|
||||
return nodes;
|
||||
});
|
||||
}
|
||||
155
frontend/components/MindmapCanvas.tsx
Normal file
155
frontend/components/MindmapCanvas.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import ReactFlow, { Background, Controls, MiniMap, type ReactFlowInstance } from "reactflow";
|
||||
import "reactflow/dist/style.css";
|
||||
import MindmapNodeCard from "@/components/MindmapNodeCard";
|
||||
import { treeToGraph } from "@/lib/treeToGraph";
|
||||
import type { MindmapNode } from "@/types/mindmap";
|
||||
|
||||
type MindmapCanvasProps = {
|
||||
tree: MindmapNode;
|
||||
className?: string;
|
||||
onNodeChat?: (nodeLabel: string) => void;
|
||||
};
|
||||
|
||||
const NODE_WIDTH = 220;
|
||||
const NODE_HEIGHT = 84;
|
||||
const nodeTypes = {
|
||||
mindmapNode: MindmapNodeCard,
|
||||
};
|
||||
|
||||
function createInitialExpandedSet(tree: MindmapNode): Set<string> {
|
||||
return new Set([tree.id]);
|
||||
}
|
||||
|
||||
export default function MindmapCanvas({ tree, className, onNodeChat }: MindmapCanvasProps) {
|
||||
const [expandedNodeIds, setExpandedNodeIds] = useState<Set<string>>(() =>
|
||||
createInitialExpandedSet(tree),
|
||||
);
|
||||
const [reactFlowInstance, setReactFlowInstance] =
|
||||
useState<ReactFlowInstance | null>(null);
|
||||
const hasFittedInitiallyRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
setExpandedNodeIds(createInitialExpandedSet(tree));
|
||||
hasFittedInitiallyRef.current = false;
|
||||
}, [tree]);
|
||||
|
||||
const panToNode = useCallback(
|
||||
(nodeId: string, nextExpandedNodeIds: Set<string>) => {
|
||||
if (!reactFlowInstance) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextGraph = treeToGraph(tree, {
|
||||
expandedNodeIds: nextExpandedNodeIds,
|
||||
});
|
||||
const focusNode = nextGraph.nodes.find((node) => node.id === nodeId);
|
||||
|
||||
if (!focusNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
const viewport = reactFlowInstance.getViewport();
|
||||
const revealOffset = nextExpandedNodeIds.has(nodeId)
|
||||
? NODE_WIDTH * 0.9
|
||||
: NODE_WIDTH * 0.45;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
reactFlowInstance.setCenter(
|
||||
focusNode.position.x + revealOffset,
|
||||
focusNode.position.y + NODE_HEIGHT / 2,
|
||||
{
|
||||
zoom: viewport.zoom,
|
||||
duration: 320,
|
||||
},
|
||||
);
|
||||
});
|
||||
},
|
||||
[reactFlowInstance, tree],
|
||||
);
|
||||
|
||||
const handleToggle = useCallback(
|
||||
(nodeId: string) => {
|
||||
setExpandedNodeIds((currentExpandedNodeIds) => {
|
||||
const nextExpandedNodeIds = new Set(currentExpandedNodeIds);
|
||||
|
||||
if (nextExpandedNodeIds.has(nodeId)) {
|
||||
nextExpandedNodeIds.delete(nodeId);
|
||||
} else {
|
||||
nextExpandedNodeIds.add(nodeId);
|
||||
}
|
||||
|
||||
panToNode(nodeId, nextExpandedNodeIds);
|
||||
return nextExpandedNodeIds;
|
||||
});
|
||||
},
|
||||
[panToNode],
|
||||
);
|
||||
|
||||
const graph = useMemo(
|
||||
() =>
|
||||
treeToGraph(tree, {
|
||||
expandedNodeIds,
|
||||
onToggleNode: handleToggle,
|
||||
onOpenNodeChat: onNodeChat,
|
||||
}),
|
||||
[expandedNodeIds, handleToggle, onNodeChat, tree],
|
||||
);
|
||||
|
||||
const keepNodeInteractive = useCallback(() => {
|
||||
// React Flow only enables pointer events for nodes when at least one node handler exists.
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!reactFlowInstance || hasFittedInitiallyRef.current || graph.nodes.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const frame = window.requestAnimationFrame(() => {
|
||||
reactFlowInstance.fitView({
|
||||
padding: 0.16,
|
||||
duration: 420,
|
||||
maxZoom: 1,
|
||||
});
|
||||
hasFittedInitiallyRef.current = true;
|
||||
});
|
||||
|
||||
return () => window.cancelAnimationFrame(frame);
|
||||
}, [graph.nodes, reactFlowInstance]);
|
||||
|
||||
return (
|
||||
<div className={`h-full w-full overflow-hidden bg-white ${className ?? ""}`}>
|
||||
<ReactFlow
|
||||
nodes={graph.nodes}
|
||||
edges={graph.edges}
|
||||
nodeTypes={nodeTypes}
|
||||
onInit={setReactFlowInstance}
|
||||
onNodeClick={keepNodeInteractive}
|
||||
panOnDrag
|
||||
zoomOnScroll
|
||||
zoomOnPinch
|
||||
zoomOnDoubleClick={false}
|
||||
nodesDraggable={false}
|
||||
nodesConnectable={false}
|
||||
elementsSelectable={false}
|
||||
nodesFocusable={false}
|
||||
edgesFocusable={false}
|
||||
selectNodesOnDrag={false}
|
||||
minZoom={0.2}
|
||||
maxZoom={2}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
>
|
||||
<MiniMap
|
||||
pannable
|
||||
zoomable
|
||||
nodeBorderRadius={12}
|
||||
maskColor="rgba(148, 163, 184, 0.12)"
|
||||
/>
|
||||
<Controls showInteractive={false} />
|
||||
<Background gap={20} color="#dbeafe" />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
90
frontend/components/MindmapNodeCard.tsx
Normal file
90
frontend/components/MindmapNodeCard.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useCallback, type MouseEvent } from "react";
|
||||
import { Handle, Position, type NodeProps } from "reactflow";
|
||||
import type { GraphNodeData } from "@/types/mindmap";
|
||||
|
||||
function MindmapNodeCard({ data }: NodeProps<GraphNodeData>) {
|
||||
const isRoot = data.level === 0;
|
||||
const canOpenChat = typeof data.onOpenChat === "function";
|
||||
|
||||
const handleToggleClick = useCallback(
|
||||
(event: MouseEvent<HTMLButtonElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
data.onToggle?.();
|
||||
},
|
||||
[data],
|
||||
);
|
||||
|
||||
const handleContentDoubleClick = useCallback(
|
||||
(event: MouseEvent<HTMLButtonElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
data.onOpenChat?.();
|
||||
},
|
||||
[data],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative flex h-[84px] w-[220px] items-center justify-center rounded-[18px] border px-5 py-4 ${
|
||||
isRoot
|
||||
? "border-blue-500 bg-blue-600 text-white shadow-[0_18px_40px_rgba(37,99,235,0.24)]"
|
||||
: "border-slate-200 bg-white text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.08)]"
|
||||
} cursor-default`}
|
||||
>
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Left}
|
||||
className={`!pointer-events-none !left-[-7px] !h-3 !w-3 !border ${
|
||||
isRoot ? "!border-blue-200 !bg-blue-100" : "!border-slate-300 !bg-white"
|
||||
}`}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onDoubleClick={handleContentDoubleClick}
|
||||
disabled={!canOpenChat}
|
||||
title={canOpenChat ? "双击发起聊天" : undefined}
|
||||
className={`nodrag nopan max-w-[156px] select-none rounded-xl px-2 py-1 text-center text-sm font-semibold leading-6 transition-colors ${
|
||||
canOpenChat
|
||||
? isRoot
|
||||
? "cursor-pointer hover:bg-white/10"
|
||||
: "cursor-pointer hover:bg-slate-50"
|
||||
: "cursor-default"
|
||||
} disabled:pointer-events-none disabled:opacity-100`}
|
||||
>
|
||||
{data.label}
|
||||
</button>
|
||||
|
||||
{data.hasChildren ? (
|
||||
<>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
className={`!pointer-events-none !right-[-7px] !h-3 !w-3 !border ${
|
||||
isRoot ? "!border-blue-200 !bg-blue-100" : "!border-blue-300 !bg-white"
|
||||
}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={data.isExpanded ? "收起子节点" : "展开子节点"}
|
||||
onClick={handleToggleClick}
|
||||
className="nodrag nopan absolute right-0 top-1/2 z-20 flex h-9 w-9 translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-blue-200 bg-white text-lg font-semibold text-blue-700 shadow-[0_8px_18px_rgba(37,99,235,0.14)] transition-all hover:border-blue-300 hover:bg-blue-50 active:scale-95"
|
||||
>
|
||||
{data.isExpanded ? "-" : "+"}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<span
|
||||
className={`pointer-events-none absolute -right-[7px] top-1/2 h-3 w-3 -translate-y-1/2 rounded-full border ${
|
||||
isRoot ? "border-blue-200 bg-blue-100" : "border-slate-300 bg-white"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(MindmapNodeCard);
|
||||
Reference in New Issue
Block a user