133 lines
3.6 KiB
TypeScript
133 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import ReactQuill from 'react-quill';
|
|
import "quill/dist/quill.snow.css";
|
|
|
|
// 一些工具函数导入
|
|
import getArxivPapers from "./GetArxiv";
|
|
import sendMessageToOpenAI from "./chatAI";
|
|
|
|
|
|
const QEditor = () => {
|
|
const [quill, setQuill] = useState(null);
|
|
const [userInput, setUserInput] = useState("");
|
|
|
|
const [content, setContent] = useState("");
|
|
|
|
// 处理内容变化
|
|
const handleContentChange = (content) => {
|
|
setContent(content);
|
|
convertToSuperscript();
|
|
};
|
|
|
|
|
|
function convertToSuperscript() {
|
|
const text = quill.getText();
|
|
const regex = /\[\d+\]/g; // 正则表达式匹配 "[数字]" 格式
|
|
let match;
|
|
|
|
while ((match = regex.exec(text)) !== null) {
|
|
const startIndex = match.index;
|
|
const length = match[0].length;
|
|
|
|
// 应用上标格式
|
|
quill.formatText(startIndex, length, { script: "super" });
|
|
// 重置格式（如果需要）
|
|
if (startIndex + length < text.length) {
|
|
quill.formatText(startIndex + length, 1, "script", false);
|
|
}
|
|
}
|
|
}
|
|
// 处理按钮点击事件来插入文本
|
|
const handleButtonClick = () => {
|
|
if (quill) {
|
|
quill.insertText(quill.getLength(), "Hello, World!");
|
|
}
|
|
};
|
|
|
|
// 处理用户输入变化
|
|
const handleInputChange = (event) => {
|
|
setUserInput(event.target.value);
|
|
};
|
|
|
|
const paper2AI = (topic: string) => {
|
|
getArxivPapers(topic).then((rawData) => {
|
|
// 将每篇文章的信息转换为字符串
|
|
const dataString = rawData
|
|
.map((entry) => {
|
|
return `ID: ${entry.id}\nPublished: ${entry.published}\nTitle: ${entry.title}\nSummary: ${entry.summary}\n\n`;
|
|
})
|
|
.join("");
|
|
// 将处理后的字符串插入到编辑器中
|
|
sendMessageToOpenAI(dataString, quill, quill.getText(), topic);
|
|
});
|
|
};
|
|
|
|
// 插入论文信息
|
|
const insertPapers = async (topic: string) => {
|
|
const rawData = await getArxivPapers(topic);
|
|
const dataString = rawData
|
|
.map((entry) => {
|
|
return `ID: ${entry.id}\nPublished: ${entry.published}\nTitle: ${entry.title}\nSummary: ${entry.summary}\n\n`;
|
|
})
|
|
.join("");
|
|
quill.insertText(quill.getLength(), dataString);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="space-y-2">
|
|
<button
|
|
onClick={handleButtonClick}
|
|
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
|
>
|
|
Insert Text
|
|
</button>
|
|
|
|
<input
|
|
type="text"
|
|
value={userInput}
|
|
onChange={handleInputChange}
|
|
className="shadow appearance-none border rounded py-2 px-3 text-grey-darker"
|
|
/>
|
|
|
|
{/*<button
|
|
onClick={handleAIClick}
|
|
className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
|
|
>
|
|
Insert AI Text
|
|
</button>*/}
|
|
|
|
<button
|
|
onClick={() => insertPapers("gnn")}
|
|
className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded"
|
|
>
|
|
Insert Papers
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => paper2AI("gnn")}
|
|
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
|
|
>
|
|
Paper2AI
|
|
</button>
|
|
</div>
|
|
<div
|
|
id="editor"
|
|
style={{
|
|
height: "500px",
|
|
width: "600px",
|
|
minHeight: "150px", // 注意驼峰命名法
|
|
maxHeight: "500px",
|
|
overflowY: "auto", // overflow-y -> overflowY
|
|
border: "1px solid #ccc",
|
|
padding: "10px",
|
|
}}
|
|
></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QEditor;
|