修补输入框
This commit is contained in:
@@ -3,88 +3,147 @@ import { subscribeWithSelector } from 'zustand/middleware';
|
||||
|
||||
const useChatBoxStore = create(
|
||||
subscribeWithSelector((set, get) => ({
|
||||
// 聊天历史消息列表
|
||||
messages: [],
|
||||
// 聊天历史消息列表
|
||||
messages: [],
|
||||
|
||||
// 用户名称
|
||||
userName: '',
|
||||
// 用户名称
|
||||
userName: '',
|
||||
|
||||
// 角色名称
|
||||
characterName: '',
|
||||
// 角色名称
|
||||
characterName: '',
|
||||
|
||||
// 当前选中的角色
|
||||
currentRole: null,
|
||||
// 当前选中的角色
|
||||
currentRole: null,
|
||||
|
||||
// 当前选中的聊天
|
||||
currentChat: null,
|
||||
// 当前选中的聊天
|
||||
currentChat: null,
|
||||
|
||||
// 是否正在加载
|
||||
isLoading: false,
|
||||
// 是否正在加载
|
||||
isLoading: false,
|
||||
|
||||
// 错误信息
|
||||
error: null,
|
||||
// 是否正在生成
|
||||
isGenerating: false,
|
||||
|
||||
// 设置消息列表
|
||||
setMessages: (messages) => set({ messages }),
|
||||
// 错误信息
|
||||
error: null,
|
||||
|
||||
// 设置用户名称
|
||||
setUserName: (userName) => set({ userName }),
|
||||
// 设置消息列表
|
||||
setMessages: (messages) => set({ messages }),
|
||||
|
||||
// 设置角色名称
|
||||
setCharacterName: (characterName) => set({ characterName }),
|
||||
// 设置用户名称
|
||||
setUserName: (userName) => set({ userName }),
|
||||
|
||||
// 设置当前角色
|
||||
setCurrentRole: (role) => set({ currentRole: role }),
|
||||
// 设置角色名称
|
||||
setCharacterName: (characterName) => set({ characterName }),
|
||||
|
||||
// 设置当前聊天
|
||||
setCurrentChat: (chat) => set({ currentChat: chat }),
|
||||
// 设置当前角色
|
||||
setCurrentRole: (role) => set({ currentRole: role }),
|
||||
|
||||
// 同时设置角色和聊天
|
||||
setChatBoxRoleAndChat: (role, chat) => set({
|
||||
currentRole: role,
|
||||
currentChat: chat
|
||||
}),
|
||||
// 设置当前聊天
|
||||
setCurrentChat: (chat) => set({ currentChat: chat }),
|
||||
|
||||
|
||||
// 加载聊天历史
|
||||
fetchChatHistory: async (roleName, chatName) => {
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
const response = await fetch(`/api/chat_box/get_chat_history?role_name=${encodeURIComponent(roleName)}&chat_name=${encodeURIComponent(chatName)}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch chat history');
|
||||
}
|
||||
const data = await response.json();
|
||||
// 修改数据处理逻辑，适配API返回的数据结构
|
||||
set({
|
||||
messages: data || [], // 直接使用返回的数组
|
||||
userName: 'User', // 固定用户名
|
||||
characterName: roleName || 'Assistant', // 使用角色名作为角色名称
|
||||
isLoading: false
|
||||
});
|
||||
} catch (error) {
|
||||
set({
|
||||
error: error.message,
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
// 同时设置角色和聊天
|
||||
setChatBoxRoleAndChat: (role, chat) => {
|
||||
console.log('[ChatBoxStore] setChatBoxRoleAndChat called with:', { role, chat });
|
||||
set({
|
||||
currentRole: role,
|
||||
currentChat: chat
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 清空聊天历史
|
||||
clearChatHistory: () => set({
|
||||
messages: [],
|
||||
userName: '',
|
||||
characterName: '',
|
||||
error: null
|
||||
}),
|
||||
// 设置生成状态
|
||||
setIsGenerating: (status) => set({ isGenerating: status }),
|
||||
|
||||
// 更新特定消息的内容
|
||||
updateMessage: (id, content) => set((state) => ({
|
||||
messages: state.messages.map((msg) =>
|
||||
msg.id === id ? { ...msg, content } : msg
|
||||
)
|
||||
})),
|
||||
sendMessage: async (content) => {
|
||||
const { messages, userName, characterName, currentRole, currentChat } = get();
|
||||
|
||||
set({
|
||||
isGenerating: true,
|
||||
messages: [...messages, {
|
||||
id: Date.now(),
|
||||
floor: messages.length + 1,
|
||||
mes: content,
|
||||
is_user: true
|
||||
}]
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/chat_box/send_message', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
role_name: currentRole,
|
||||
chat_name: currentChat,
|
||||
message: content
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to send message');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
set((state) => ({
|
||||
messages: [...state.messages, {
|
||||
id: Date.now(),
|
||||
floor: state.messages.length + 1,
|
||||
mes: data.response,
|
||||
is_user: false
|
||||
}],
|
||||
isGenerating: false
|
||||
}));
|
||||
} catch (error) {
|
||||
set({
|
||||
error: error.message,
|
||||
isGenerating: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 终止生成
|
||||
stopGeneration: () => set({ isGenerating: false }),
|
||||
// 加载聊天历史
|
||||
fetchChatHistory: async (roleName, chatName) => {
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
const response = await fetch(`/api/chat_box/get_chat_history?role_name=${encodeURIComponent(roleName)}&chat_name=${encodeURIComponent(chatName)}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch chat history');
|
||||
}
|
||||
const data = await response.json();
|
||||
// 修改数据处理逻辑，适配API返回的数据结构
|
||||
set({
|
||||
messages: data || [], // 直接使用返回的数组
|
||||
userName: 'User', // 固定用户名
|
||||
characterName: roleName || 'Assistant', // 使用角色名作为角色名称
|
||||
isLoading: false
|
||||
});
|
||||
} catch (error) {
|
||||
set({
|
||||
error: error.message,
|
||||
isLoading: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 清空聊天历史
|
||||
clearChatHistory: () => set({
|
||||
messages: [],
|
||||
userName: '',
|
||||
characterName: '',
|
||||
error: null
|
||||
}),
|
||||
|
||||
// 更新特定消息的内容
|
||||
updateMessage: (id, content) => set((state) => ({
|
||||
messages: state.messages.map((msg) =>
|
||||
msg.id === id ? { ...msg, content } : msg
|
||||
)
|
||||
})),
|
||||
}))
|
||||
);
|
||||
|
||||
@@ -92,15 +151,15 @@ const useChatBoxStore = create(
|
||||
useChatBoxStore.subscribe(
|
||||
(state) => ({ role: state.currentRole, chat: state.currentChat }),
|
||||
({ role, chat }, prev) => {
|
||||
// 只有当角色或聊天发生变化时才处理
|
||||
if (role !== prev.role || chat !== prev.chat) {
|
||||
// 确保角色和聊天都存在且不为null
|
||||
if (role && chat) {
|
||||
useChatBoxStore.getState().fetchChatHistory(role, chat);
|
||||
} else {
|
||||
useChatBoxStore.getState().clearChatHistory();
|
||||
}
|
||||
}
|
||||
// 只有当角色或聊天发生变化时才处理
|
||||
if (role !== prev.role || chat !== prev.chat) {
|
||||
// 确保角色和聊天都存在且不为null
|
||||
if (role && chat) {
|
||||
useChatBoxStore.getState().fetchChatHistory(role, chat);
|
||||
} else {
|
||||
useChatBoxStore.getState().clearChatHistory();
|
||||
}
|
||||
}
|
||||
},
|
||||
{ equalityFn: (a, b) => a.role === b.role && a.chat === b.chat }
|
||||
);
|
||||
|
||||
@@ -6,128 +6,181 @@ const ChatBox = () => {
|
||||
const [editingId, setEditingId] = useState(null);
|
||||
const [editContent, setEditContent] = useState('');
|
||||
const messagesEndRef = useRef(null);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
// 从 ChatBoxStore 获取状态和方法
|
||||
const {
|
||||
messages,
|
||||
isLoading,
|
||||
error,
|
||||
userName,
|
||||
characterName,
|
||||
updateMessage
|
||||
} = useChatBoxStore();
|
||||
// 从 ChatBoxStore 获取状态和方法
|
||||
const {
|
||||
messages,
|
||||
isLoading,
|
||||
error,
|
||||
userName,
|
||||
characterName,
|
||||
updateMessage,
|
||||
isGenerating,
|
||||
sendMessage,
|
||||
stopGeneration
|
||||
} = useChatBoxStore();
|
||||
|
||||
const [inputHeight, setInputHeight] = useState(42);
|
||||
|
||||
// 添加输入框高度自适应处理
|
||||
const handleInputHeight = (e) => {
|
||||
const textarea = e.target;
|
||||
const newHeight = Math.min(Math.max(textarea.scrollHeight, 42), 300);
|
||||
setInputHeight(newHeight);
|
||||
};
|
||||
|
||||
// 处理发送或终止
|
||||
const handleSendOrStop = () => {
|
||||
if (isGenerating) {
|
||||
stopGeneration();
|
||||
} else {
|
||||
sendMessage(inputValue);
|
||||
setInputValue('');
|
||||
setInputHeight(42);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理键盘事件
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSendOrStop();
|
||||
}
|
||||
};
|
||||
|
||||
// 自动滚动到底部
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
// 处理编辑消息
|
||||
const handleEdit = (message) => {
|
||||
setEditingId(message.floor);
|
||||
setEditContent(message.mes);
|
||||
setEditingId(message.floor);
|
||||
setEditContent(message.mes);
|
||||
};
|
||||
|
||||
// 保存编辑
|
||||
const handleSaveEdit = (messageId) => {
|
||||
// 调用 store 中的 updateMessage 方法
|
||||
updateMessage(messageId, editContent);
|
||||
setEditingId(null);
|
||||
setEditContent('');
|
||||
// 调用 store 中的 updateMessage 方法
|
||||
updateMessage(messageId, editContent);
|
||||
setEditingId(null);
|
||||
setEditContent('');
|
||||
};
|
||||
|
||||
// 取消编辑
|
||||
const handleCancelEdit = () => {
|
||||
setEditingId(null);
|
||||
setEditContent('');
|
||||
setEditingId(null);
|
||||
setEditContent('');
|
||||
};
|
||||
|
||||
// 渲染单条消息
|
||||
const renderMessage = (message) => {
|
||||
const isUser = message.is_user;
|
||||
const isEditing = editingId === message.floor;
|
||||
const isUser = message.is_user;
|
||||
const isEditing = editingId === message.floor;
|
||||
|
||||
// 根据消息类型设置显示名称
|
||||
const displayName = isUser ? userName : characterName;
|
||||
// 根据消息类型设置显示名称
|
||||
const displayName = isUser ? userName : characterName;
|
||||
|
||||
return (
|
||||
<div key={message.floor} className={`message ${isUser ? 'user' : 'ai'}`}>
|
||||
<div className="message-container">
|
||||
<div className="message-header">
|
||||
<span className="message-name">{displayName}</span>
|
||||
<span className="message-id">#{message.floor}</span>
|
||||
<div className="message-toolbar">
|
||||
<div className="toolbar-buttons">
|
||||
<button
|
||||
className="toolbar-button"
|
||||
onClick={() => handleEdit(message)}
|
||||
title="编辑"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
className="toolbar-button"
|
||||
title="更多"
|
||||
>
|
||||
•••
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="message-content">
|
||||
{isEditing ? (
|
||||
<div className="edit-container">
|
||||
<textarea
|
||||
className="edit-textarea"
|
||||
value={editContent}
|
||||
onChange={(e) => setEditContent(e.target.value)}
|
||||
/>
|
||||
<div className="edit-buttons">
|
||||
<button
|
||||
className="cancel-button"
|
||||
onClick={handleCancelEdit}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
className="save-button"
|
||||
onClick={() => handleSaveEdit(message.floor)}
|
||||
>
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bubble">
|
||||
{message.mes}
|
||||
</div>
|
||||
)}
|
||||
return (
|
||||
<div key={message.floor} className={`message ${isUser ? 'user' : 'ai'}`}>
|
||||
<div className="message-container">
|
||||
<div className="message-header">
|
||||
<span className="message-name">{displayName}</span>
|
||||
<span className="message-id">#{message.floor}</span>
|
||||
<div className="message-toolbar">
|
||||
<div className="toolbar-buttons">
|
||||
<button
|
||||
className="toolbar-button"
|
||||
onClick={() => handleEdit(message)}
|
||||
title="编辑"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
className="toolbar-button"
|
||||
title="更多"
|
||||
>
|
||||
•••
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="message-content">
|
||||
{isEditing ? (
|
||||
<div className="edit-container">
|
||||
<textarea
|
||||
className="edit-textarea"
|
||||
value={editContent}
|
||||
onChange={(e) => setEditContent(e.target.value)}
|
||||
/>
|
||||
<div className="edit-buttons">
|
||||
<button
|
||||
className="cancel-button"
|
||||
onClick={handleCancelEdit}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
className="save-button"
|
||||
onClick={() => handleSaveEdit(message.floor)}
|
||||
>
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bubble">
|
||||
{message.mes}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="chat-box">
|
||||
<div className="chat-messages">
|
||||
{isLoading ? (
|
||||
<div className="loading">加载中...</div>
|
||||
) : error ? (
|
||||
<div className="error">{error}</div>
|
||||
) : messages.length === 0 ? (
|
||||
<div className="loading">暂无消息</div>
|
||||
) : (
|
||||
messages.map(renderMessage)
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
<div className="chat-input-wrapper">
|
||||
<div className="chat-input-area">
|
||||
<textarea
|
||||
value={inputValue}
|
||||
onChange={(e) => {
|
||||
setInputValue(e.target.value);
|
||||
handleInputHeight(e);
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
style={{ height: `${inputHeight}px` }}
|
||||
placeholder="输入消息..."
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className={`send-button ${isGenerating ? 'stopping' : ''}`}
|
||||
onClick={handleSendOrStop}
|
||||
disabled={!inputValue.trim() && !isGenerating}
|
||||
>
|
||||
{isGenerating ? '终止' : '发送'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="chat-box">
|
||||
<div className="chat-messages">
|
||||
{isLoading ? (
|
||||
<div className="loading">加载中...</div>
|
||||
) : error ? (
|
||||
<div className="error">{error}</div>
|
||||
) : messages.length === 0 ? (
|
||||
<div className="loading">暂无消息</div>
|
||||
) : (
|
||||
messages.map(renderMessage)
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatBox;
|
||||
|
||||
@@ -1,146 +1,146 @@
|
||||
// npm install react react-dom react-markdown react-syntax-highlighter remark-math rehype-katex react-copy-to-clipboard mermaid katex
|
||||
import React, { useState, useCallback, useEffect } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
||||
import remarkMath from "remark-math";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
import { CopyToClipboard } from "react-copy-to-clipboard";
|
||||
import mermaid from "mermaid";
|
||||
import "katex/dist/katex.min.css";
|
||||
|
||||
// Mermaid 初始化配置
|
||||
// Mermaid是一个画图的语言
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: "default",
|
||||
securityLevel: "loose",
|
||||
});
|
||||
|
||||
const DownSvg = () => (
|
||||
<svg width="12" height="12" viewBox="0 0 24 24">
|
||||
<path d="M7 10l5 5 5-5z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CopySvg = () => (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24">
|
||||
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
||||
const MermaidChart= ({ code }) => {
|
||||
const [svg, setSvg] = useState("");
|
||||
const [id] = useState(() => `mermaid-${Math.random().toString(36).substr(2, 9)}`);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
mermaid.parse(code);
|
||||
mermaid.render(id, code).then(({ svg }) => setSvg(svg));
|
||||
} catch (err) {
|
||||
setSvg(`<pre>Error rendering mermaid: ${err}</pre>`);
|
||||
}
|
||||
}, [code, id]);
|
||||
|
||||
return <div dangerouslySetInnerHTML={{ __html: svg }} />;
|
||||
};
|
||||
|
||||
const MarkdownToHTML= ({ markdownRAW, className }) => {
|
||||
const [isMermaidLoaded] = useState(true);
|
||||
// 渲染代码块的方法
|
||||
const CodeBlock = useCallback(
|
||||
({ node, inline, className, children, ...props } ) => {
|
||||
const [isShowCode, setIsShowCode] = useState(true); // 添加展开与收起代码块状态
|
||||
const [isShowCopy, setIsShowCopy] = useState(false);// 添加点击复制的状态
|
||||
const match = /language-(\w+)/.exec(className || ""); // 这是用来匹配代码块对应语言的方法
|
||||
const codeContent = String(children).replace(/\n$/, "");
|
||||
// 处理复制成功提示
|
||||
const handleCopy = () => {
|
||||
setIsShowCopy(true);
|
||||
setTimeout(() => setIsShowCopy(false), 1500);
|
||||
};
|
||||
//处理单行代码
|
||||
if (inline) {
|
||||
return <code className={className} {...props}>{children}</code>;
|
||||
}
|
||||
|
||||
// 处理 Mermaid 图表代码
|
||||
if (match?.[1] === "mermaid" && isMermaidLoaded) {
|
||||
return (
|
||||
<div style={{ position: "relative", margin: "20px 0" }}>
|
||||
<div className="code-header">
|
||||
<div
|
||||
style={{ cursor: "pointer", marginRight: "10px", transformOrigin: "8px" }}
|
||||
className={isShowCode ? "code-rotate-down" : "code-rotate-right"}
|
||||
onClick={() => setIsShowCode(!isShowCode)}
|
||||
>
|
||||
<DownSvg />
|
||||
</div>
|
||||
<div>{match[1]}</div>
|
||||
<CopyToClipboard text={codeContent} onCopy={handleCopy}>
|
||||
<div className="preview-code-copy" style={{ cursor: "pointer" }}>
|
||||
{isShowCopy && <span className="copy-success">✓ 复制成功</span>}
|
||||
<CopySvg />
|
||||
</div>
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
{isShowCode && <MermaidChart code={codeContent} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative", padding:"0"}}>
|
||||
<div className="code-header">
|
||||
<div
|
||||
style={{ cursor: "pointer", marginRight: "10px", transformOrigin: "8px" }}
|
||||
className={isShowCode ? "code-rotate-down" : "code-rotate-right"}
|
||||
onClick={() => setIsShowCode(!isShowCode)}
|
||||
>
|
||||
<DownSvg style={{
|
||||
transform: isShowCode ? "rotate(0deg)" : "rotate(-90deg)",
|
||||
transition: "transform 0.2s"
|
||||
}} />
|
||||
</div>
|
||||
<div>{match?.[1] || "code"}</div>
|
||||
<CopyToClipboard text={codeContent} onCopy={handleCopy}>
|
||||
<div className="preview-code-copy" style={{ cursor: "pointer" }}>
|
||||
{isShowCopy && <span className="copy-success">✓ 复制成功</span>}
|
||||
<CopySvg />
|
||||
</div>
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
{isShowCode && (
|
||||
<SyntaxHighlighter
|
||||
style={materialLight}
|
||||
language={match?.[1] || "text"}
|
||||
PreTag="div"
|
||||
showLineNumbers
|
||||
{...props}
|
||||
>
|
||||
{codeContent}
|
||||
</SyntaxHighlighter>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[isMermaidLoaded]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className} >
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
components={{ code: CodeBlock }}
|
||||
>
|
||||
{markdownRAW}
|
||||
</ReactMarkdown>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarkdownToHTML;
|
||||
// // npm install react react-dom react-markdown react-syntax-highlighter remark-math rehype-katex react-copy-to-clipboard mermaid katex
|
||||
// import React, { useState, useCallback, useEffect } from "react";
|
||||
// import ReactMarkdown from "react-markdown";
|
||||
// import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
// import { materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
||||
// import remarkMath from "remark-math";
|
||||
// import rehypeKatex from "rehype-katex";
|
||||
// import { CopyToClipboard } from "react-copy-to-clipboard";
|
||||
// import mermaid from "mermaid";
|
||||
// import "katex/dist/katex.min.css";
|
||||
//
|
||||
// // Mermaid 初始化配置
|
||||
// // Mermaid是一个画图的语言
|
||||
// mermaid.initialize({
|
||||
// startOnLoad: false,
|
||||
// theme: "default",
|
||||
// securityLevel: "loose",
|
||||
// });
|
||||
//
|
||||
// const DownSvg = () => (
|
||||
// <svg width="12" height="12" viewBox="0 0 24 24">
|
||||
// <path d="M7 10l5 5 5-5z" fill="currentColor" />
|
||||
// </svg>
|
||||
// );
|
||||
//
|
||||
// const CopySvg = () => (
|
||||
// <svg width="14" height="14" viewBox="0 0 24 24">
|
||||
// <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor" />
|
||||
// </svg>
|
||||
// );
|
||||
//
|
||||
//
|
||||
// const MermaidChart= ({ code }) => {
|
||||
// const [svg, setSvg] = useState("");
|
||||
// const [id] = useState(() => `mermaid-${Math.random().toString(36).substr(2, 9)}`);
|
||||
//
|
||||
// useEffect(() => {
|
||||
// try {
|
||||
// mermaid.parse(code);
|
||||
// mermaid.render(id, code).then(({ svg }) => setSvg(svg));
|
||||
// } catch (err) {
|
||||
// setSvg(`<pre>Error rendering mermaid: ${err}</pre>`);
|
||||
// }
|
||||
// }, [code, id]);
|
||||
//
|
||||
// return <div dangerouslySetInnerHTML={{ __html: svg }} />;
|
||||
// };
|
||||
//
|
||||
// const MarkdownToHTML= ({ markdownRAW, className }) => {
|
||||
// const [isMermaidLoaded] = useState(true);
|
||||
// // 渲染代码块的方法
|
||||
// const CodeBlock = useCallback(
|
||||
// ({ node, inline, className, children, ...props } ) => {
|
||||
// const [isShowCode, setIsShowCode] = useState(true); // 添加展开与收起代码块状态
|
||||
// const [isShowCopy, setIsShowCopy] = useState(false);// 添加点击复制的状态
|
||||
// const match = /language-(\w+)/.exec(className || ""); // 这是用来匹配代码块对应语言的方法
|
||||
// const codeContent = String(children).replace(/\n$/, "");
|
||||
// // 处理复制成功提示
|
||||
// const handleCopy = () => {
|
||||
// setIsShowCopy(true);
|
||||
// setTimeout(() => setIsShowCopy(false), 1500);
|
||||
// };
|
||||
// //处理单行代码
|
||||
// if (inline) {
|
||||
// return <code className={className} {...props}>{children}</code>;
|
||||
// }
|
||||
//
|
||||
// // 处理 Mermaid 图表代码
|
||||
// if (match?.[1] === "mermaid" && isMermaidLoaded) {
|
||||
// return (
|
||||
// <div style={{ position: "relative", margin: "20px 0" }}>
|
||||
// <div className="code-header">
|
||||
// <div
|
||||
// style={{ cursor: "pointer", marginRight: "10px", transformOrigin: "8px" }}
|
||||
// className={isShowCode ? "code-rotate-down" : "code-rotate-right"}
|
||||
// onClick={() => setIsShowCode(!isShowCode)}
|
||||
// >
|
||||
// <DownSvg />
|
||||
// </div>
|
||||
// <div>{match[1]}</div>
|
||||
// <CopyToClipboard text={codeContent} onCopy={handleCopy}>
|
||||
// <div className="preview-code-copy" style={{ cursor: "pointer" }}>
|
||||
// {isShowCopy && <span className="copy-success">✓ 复制成功</span>}
|
||||
// <CopySvg />
|
||||
// </div>
|
||||
// </CopyToClipboard>
|
||||
// </div>
|
||||
// {isShowCode && <MermaidChart code={codeContent} />}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
//
|
||||
// return (
|
||||
// <div style={{ position: "relative", padding:"0"}}>
|
||||
// <div className="code-header">
|
||||
// <div
|
||||
// style={{ cursor: "pointer", marginRight: "10px", transformOrigin: "8px" }}
|
||||
// className={isShowCode ? "code-rotate-down" : "code-rotate-right"}
|
||||
// onClick={() => setIsShowCode(!isShowCode)}
|
||||
// >
|
||||
// <DownSvg style={{
|
||||
// transform: isShowCode ? "rotate(0deg)" : "rotate(-90deg)",
|
||||
// transition: "transform 0.2s"
|
||||
// }} />
|
||||
// </div>
|
||||
// <div>{match?.[1] || "code"}</div>
|
||||
// <CopyToClipboard text={codeContent} onCopy={handleCopy}>
|
||||
// <div className="preview-code-copy" style={{ cursor: "pointer" }}>
|
||||
// {isShowCopy && <span className="copy-success">✓ 复制成功</span>}
|
||||
// <CopySvg />
|
||||
// </div>
|
||||
// </CopyToClipboard>
|
||||
// </div>
|
||||
// {isShowCode && (
|
||||
// <SyntaxHighlighter
|
||||
// style={materialLight}
|
||||
// language={match?.[1] || "text"}
|
||||
// PreTag="div"
|
||||
// showLineNumbers
|
||||
// {...props}
|
||||
// >
|
||||
// {codeContent}
|
||||
// </SyntaxHighlighter>
|
||||
// )}
|
||||
// </div>
|
||||
// );
|
||||
// },
|
||||
// [isMermaidLoaded]
|
||||
// );
|
||||
//
|
||||
// return (
|
||||
// <div
|
||||
// className={className} >
|
||||
// <ReactMarkdown
|
||||
// remarkPlugins={[remarkMath]}
|
||||
// rehypePlugins={[rehypeKatex]}
|
||||
// components={{ code: CodeBlock }}
|
||||
// >
|
||||
// {markdownRAW}
|
||||
// </ReactMarkdown>
|
||||
//
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
//
|
||||
// export default MarkdownToHTML;
|
||||
Reference in New Issue
Block a user