Spaces:
Running
Running
File size: 3,008 Bytes
372531f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
// LogMessage.tsx
import Accordion from '../../Task/Accordion';
import { useEffect, useState } from 'react';
import { remark } from 'remark';
import html from 'remark-html';
import ImagesAlbum from '../../Images/ImagesAlbum';
import Image from "next/image";
type ProcessedData = {
field: string;
htmlContent: string;
isMarkdown: boolean;
};
type Log = {
header: string;
text: string;
processedData?: ProcessedData[];
metadata?: any;
};
interface LogMessageProps {
logs: Log[];
}
const LogMessage: React.FC<LogMessageProps> = ({ logs }) => {
const [processedLogs, setProcessedLogs] = useState<Log[]>([]);
useEffect(() => {
const processLogs = async () => {
if (!logs) return;
const newLogs = await Promise.all(
logs.map(async (log) => {
try {
if (log.header === 'differences' && log.text) {
const data = JSON.parse(log.text).data;
const processedData = await Promise.all(
Object.keys(data).map(async (field) => {
const fieldValue = data[field].after || data[field].before;
if (!plainTextFields.includes(field)) {
const htmlContent = await markdownToHtml(fieldValue);
return { field, htmlContent, isMarkdown: true };
}
return { field, htmlContent: fieldValue, isMarkdown: false };
})
);
return { ...log, processedData };
}
return log;
} catch (error) {
console.error('Error processing log:', error);
return log;
}
})
);
setProcessedLogs(newLogs);
};
processLogs();
}, [logs]);
return (
<>
{processedLogs.map((log, index) => {
if (log.header === 'subquery_context_window' || log.header === 'differences') {
return <Accordion key={index} logs={[log]} />;
} else if (log.header !== 'selected_images' && log.header !== 'scraping_images') {
return (
<div
key={index}
className="w-full max-w-4xl mx-auto rounded-lg pt-2 mt-3 pb-2 px-4 bg-gray-900 shadow-md"
>
<p className="py-3 text-base leading-relaxed text-white dark:text-white">
{log.text}
</p>
</div>
);
}
return null;
})}
</>
);
};
const markdownToHtml = async (markdown: string): Promise<string> => {
try {
const result = await remark().use(html).process(markdown);
return result.toString();
} catch (error) {
console.error('Error converting Markdown to HTML:', error);
return ''; // Handle error gracefully, return empty string or default content
}
};
const plainTextFields = ['task', 'sections', 'headers', 'sources', 'research_data'];
export default LogMessage; |