802 lines
27 KiB
TypeScript
802 lines
27 KiB
TypeScript
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
import {
|
|
Document,
|
|
Packer,
|
|
Paragraph,
|
|
TextRun,
|
|
HeadingLevel,
|
|
ExternalHyperlink,
|
|
} from "docx";
|
|
import DOMPurify from "dompurify";
|
|
import { saveAs } from "file-saver";
|
|
import html2canvas from "html2canvas";
|
|
import { jsPDF } from "jspdf";
|
|
import {
|
|
Check,
|
|
Copy,
|
|
Headphones,
|
|
Pencil,
|
|
Undo2,
|
|
X,
|
|
Download,
|
|
FileText,
|
|
FileCode,
|
|
FileImage,
|
|
FileType,
|
|
} from "lucide-react";
|
|
import { marked } from "marked";
|
|
import { useTranslations } from "next-intl";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import { ScrollContainer } from "~/components/deer-flow/scroll-container";
|
|
import { Tooltip } from "~/components/deer-flow/tooltip";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Card } from "~/components/ui/card";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "~/components/ui/dropdown-menu";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
|
|
import { useReplay } from "~/core/replay";
|
|
import { closeResearch, listenToPodcast, useStore } from "~/core/store";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
import { ResearchActivitiesBlock } from "./research-activities-block";
|
|
import { ResearchReportBlock } from "./research-report-block";
|
|
|
|
export function ResearchBlock({
|
|
className,
|
|
researchId = null,
|
|
}: {
|
|
className?: string;
|
|
researchId: string | null;
|
|
}) {
|
|
const t = useTranslations("chat.research");
|
|
const reportId = useStore((state) =>
|
|
researchId ? state.researchReportIds.get(researchId) : undefined,
|
|
);
|
|
const [activeTab, setActiveTab] = useState("activities");
|
|
const hasReport = useStore((state) =>
|
|
researchId ? state.researchReportIds.has(researchId) : false,
|
|
);
|
|
const reportStreaming = useStore((state) =>
|
|
reportId ? (state.messages.get(reportId)?.isStreaming ?? false) : false,
|
|
);
|
|
const { isReplay } = useReplay();
|
|
useEffect(() => {
|
|
if (hasReport) {
|
|
setActiveTab("report");
|
|
}
|
|
}, [hasReport]);
|
|
|
|
const handleGeneratePodcast = useCallback(async () => {
|
|
if (!researchId) {
|
|
return;
|
|
}
|
|
await listenToPodcast(researchId);
|
|
}, [researchId]);
|
|
|
|
const [editing, setEditing] = useState(false);
|
|
const [isDownloading, setIsDownloading] = useState(false);
|
|
const [copied, setCopied] = useState(false);
|
|
const handleCopy = useCallback(() => {
|
|
if (!reportId) {
|
|
return;
|
|
}
|
|
const report = useStore.getState().messages.get(reportId);
|
|
if (!report) {
|
|
return;
|
|
}
|
|
void navigator.clipboard.writeText(report.content);
|
|
setCopied(true);
|
|
setTimeout(() => {
|
|
setCopied(false);
|
|
}, 1000);
|
|
}, [reportId]);
|
|
|
|
// Helper function to generate timestamp for filenames
|
|
const getTimestamp = useCallback(() => {
|
|
const now = new Date();
|
|
const pad = (n: number) => n.toString().padStart(2, "0");
|
|
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
|
|
}, []);
|
|
|
|
// Helper function to trigger file download
|
|
const triggerDownload = useCallback(
|
|
(content: string, filename: string, mimeType: string) => {
|
|
const blob = new Blob([content], { type: mimeType });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = filename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
setTimeout(() => {
|
|
try {
|
|
if (a.parentNode) {
|
|
a.parentNode.removeChild(a);
|
|
}
|
|
} finally {
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
}, 100);
|
|
},
|
|
[],
|
|
);
|
|
|
|
// Download report as Markdown
|
|
const handleDownloadMarkdown = useCallback(() => {
|
|
if (!reportId) return;
|
|
const report = useStore.getState().messages.get(reportId);
|
|
if (!report) return;
|
|
triggerDownload(
|
|
report.content,
|
|
`research-report-${getTimestamp()}.md`,
|
|
"text/markdown",
|
|
);
|
|
}, [reportId, getTimestamp, triggerDownload]);
|
|
|
|
// Download report as HTML
|
|
const handleDownloadHTML = useCallback(() => {
|
|
if (!reportId) return;
|
|
const report = useStore.getState().messages.get(reportId);
|
|
if (!report) return;
|
|
const rawHtml = marked(report.content) as string;
|
|
const htmlContent = DOMPurify.sanitize(rawHtml);
|
|
const fullHTML = `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Research Report</title>
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; }
|
|
h1, h2, h3 { color: #333; }
|
|
code { background: #f4f4f4; padding: 2px 6px; border-radius: 4px; }
|
|
pre { background: #f4f4f4; padding: 16px; border-radius: 8px; overflow-x: auto; }
|
|
blockquote { border-left: 4px solid #ddd; margin: 0; padding-left: 16px; color: #666; }
|
|
table { border-collapse: collapse; width: 100%; }
|
|
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
|
th { background: #f4f4f4; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
${htmlContent}
|
|
</body>
|
|
</html>`;
|
|
triggerDownload(
|
|
fullHTML,
|
|
`research-report-${getTimestamp()}.html`,
|
|
"text/html",
|
|
);
|
|
}, [reportId, getTimestamp, triggerDownload]);
|
|
|
|
// Download report as PDF (text-based, no html2canvas)
|
|
const handleDownloadPDF = useCallback(async () => {
|
|
if (!reportId || isDownloading) return;
|
|
const report = useStore.getState().messages.get(reportId);
|
|
if (!report) return;
|
|
|
|
setIsDownloading(true);
|
|
try {
|
|
const pdf = new jsPDF("p", "mm", "a4");
|
|
const pageWidth = 210;
|
|
const pageHeight = 297;
|
|
const margin = 20;
|
|
const maxWidth = pageWidth - 2 * margin;
|
|
let y = margin;
|
|
|
|
// PDF formatting constants for maintainability
|
|
const PDF_CONSTANTS = {
|
|
headings: {
|
|
h1: { fontSize: 20, lineHeight: 9, spacing: 6 },
|
|
h2: { fontSize: 16, lineHeight: 7, spacing: 5 },
|
|
h3: { fontSize: 14, lineHeight: 6, spacing: 4 },
|
|
},
|
|
text: { fontSize: 11, normalHeight: 5, paragraphSpacing: 2 },
|
|
list: { bullet: "• ", indentLevel: 2 },
|
|
emptyLine: { height: 4 },
|
|
};
|
|
|
|
const lines = report.content.split("\n");
|
|
|
|
for (const line of lines) {
|
|
// Handle headings
|
|
if (line.startsWith("### ")) {
|
|
const h3 = PDF_CONSTANTS.headings.h3;
|
|
pdf.setFontSize(h3.fontSize);
|
|
pdf.setFont("helvetica", "bold");
|
|
const text = line.substring(4);
|
|
const splitText = pdf.splitTextToSize(text, maxWidth);
|
|
if (y + 10 > pageHeight - margin) {
|
|
pdf.addPage();
|
|
y = margin;
|
|
}
|
|
pdf.text(splitText, margin, y);
|
|
y += splitText.length * h3.lineHeight + h3.spacing;
|
|
} else if (line.startsWith("## ")) {
|
|
const h2 = PDF_CONSTANTS.headings.h2;
|
|
pdf.setFontSize(h2.fontSize);
|
|
pdf.setFont("helvetica", "bold");
|
|
const text = line.substring(3);
|
|
const splitText = pdf.splitTextToSize(text, maxWidth);
|
|
if (y + 12 > pageHeight - margin) {
|
|
pdf.addPage();
|
|
y = margin;
|
|
}
|
|
pdf.text(splitText, margin, y);
|
|
y += splitText.length * h2.lineHeight + h2.spacing;
|
|
} else if (line.startsWith("# ")) {
|
|
const h1 = PDF_CONSTANTS.headings.h1;
|
|
pdf.setFontSize(h1.fontSize);
|
|
pdf.setFont("helvetica", "bold");
|
|
const text = line.substring(2);
|
|
const splitText = pdf.splitTextToSize(text, maxWidth);
|
|
if (y + 14 > pageHeight - margin) {
|
|
pdf.addPage();
|
|
y = margin;
|
|
}
|
|
pdf.text(splitText, margin, y);
|
|
y += splitText.length * h1.lineHeight + h1.spacing;
|
|
} else if (line.startsWith("- ") || line.startsWith("* ")) {
|
|
// Unordered list item
|
|
const textConfig = PDF_CONSTANTS.text;
|
|
pdf.setFontSize(textConfig.fontSize);
|
|
pdf.setFont("helvetica", "normal");
|
|
const cleanText = line
|
|
.substring(2)
|
|
.replace(/\*\*(.*?)\*\*/g, "$1")
|
|
.replace(/\*(.*?)\*/g, "$1")
|
|
.replace(/`(.*?)`/g, "$1")
|
|
.replace(/\[(.*?)\]\(.*?\)/g, "$1");
|
|
const bulletText = `• ${cleanText}`;
|
|
const splitText = pdf.splitTextToSize(bulletText, maxWidth - 5);
|
|
|
|
if (
|
|
y + splitText.length * textConfig.normalHeight >
|
|
pageHeight - margin
|
|
) {
|
|
pdf.addPage();
|
|
y = margin;
|
|
}
|
|
pdf.text(splitText, margin + PDF_CONSTANTS.list.indentLevel, y);
|
|
y +=
|
|
splitText.length * textConfig.normalHeight +
|
|
PDF_CONSTANTS.text.paragraphSpacing;
|
|
} else if (/^\d+\.\s/.test(line)) {
|
|
// Ordered list item
|
|
const textConfig = PDF_CONSTANTS.text;
|
|
pdf.setFontSize(textConfig.fontSize);
|
|
pdf.setFont("helvetica", "normal");
|
|
const match = /^(\d+)\.\s(.*)$/.exec(line);
|
|
if (match?.[1] && match[2]) {
|
|
const cleanText = match[2]
|
|
.replace(/\*\*(.*?)\*\*/g, "$1")
|
|
.replace(/\*(.*?)\*/g, "$1")
|
|
.replace(/`(.*?)`/g, "$1")
|
|
.replace(/\[(.*?)\]\(.*?\)/g, "$1");
|
|
const numberedText = `${match[1]}. ${cleanText}`;
|
|
const splitText = pdf.splitTextToSize(numberedText, maxWidth - 5);
|
|
|
|
if (
|
|
y + splitText.length * textConfig.normalHeight >
|
|
pageHeight - margin
|
|
) {
|
|
pdf.addPage();
|
|
y = margin;
|
|
}
|
|
pdf.text(splitText, margin + PDF_CONSTANTS.list.indentLevel, y);
|
|
y +=
|
|
splitText.length * textConfig.normalHeight +
|
|
PDF_CONSTANTS.text.paragraphSpacing;
|
|
}
|
|
} else if (line.trim()) {
|
|
// Normal text
|
|
const textConfig = PDF_CONSTANTS.text;
|
|
pdf.setFontSize(textConfig.fontSize);
|
|
pdf.setFont("helvetica", "normal");
|
|
// Remove markdown formatting
|
|
const cleanText = line
|
|
.replace(/\*\*(.*?)\*\*/g, "$1")
|
|
.replace(/\*(.*?)\*/g, "$1")
|
|
.replace(/`(.*?)`/g, "$1")
|
|
.replace(/\[(.*?)\]\(.*?\)/g, "$1");
|
|
const splitText = pdf.splitTextToSize(cleanText, maxWidth);
|
|
|
|
if (
|
|
y + splitText.length * textConfig.normalHeight >
|
|
pageHeight - margin
|
|
) {
|
|
pdf.addPage();
|
|
y = margin;
|
|
}
|
|
pdf.text(splitText, margin, y);
|
|
y +=
|
|
splitText.length * textConfig.normalHeight +
|
|
PDF_CONSTANTS.text.paragraphSpacing;
|
|
} else {
|
|
// Empty line
|
|
y += PDF_CONSTANTS.emptyLine.height;
|
|
}
|
|
|
|
// Check page overflow
|
|
if (y > pageHeight - margin) {
|
|
pdf.addPage();
|
|
y = margin;
|
|
}
|
|
}
|
|
|
|
pdf.save(`research-report-${getTimestamp()}.pdf`);
|
|
} catch (error) {
|
|
console.error("Failed to generate PDF:", error);
|
|
toast.error(t("exportFailed"));
|
|
} finally {
|
|
setIsDownloading(false);
|
|
}
|
|
}, [reportId, getTimestamp, isDownloading, t]);
|
|
|
|
// Helper function to parse inline markdown formatting for Word export
|
|
const parseInlineMarkdown = useCallback(
|
|
(text: string): (TextRun | ExternalHyperlink)[] => {
|
|
// Process text recursively using marked's inline lexer
|
|
const runs: (TextRun | ExternalHyperlink)[] = [];
|
|
|
|
try {
|
|
// Use marked's Lexer to safely parse inline markdown
|
|
const tokens = marked.Lexer.lexInline(text);
|
|
|
|
interface MarkedToken {
|
|
type: string;
|
|
text?: string;
|
|
tokens?: MarkedToken[];
|
|
href?: string;
|
|
}
|
|
|
|
const processTokens = (tokens: MarkedToken[]): void => {
|
|
for (const token of tokens) {
|
|
if (token.type === "text") {
|
|
// Regular text
|
|
if (token.text) {
|
|
runs.push(new TextRun(token.text));
|
|
}
|
|
} else if (token.type === "strong") {
|
|
// Bold text - may contain nested tokens
|
|
if (token.tokens && token.tokens.length > 0) {
|
|
// Process nested tokens and mark them as bold
|
|
const nestedRuns: TextRun[] = [];
|
|
for (const nestedToken of token.tokens) {
|
|
if (nestedToken.type === "text") {
|
|
nestedRuns.push(
|
|
new TextRun({ text: nestedToken.text, bold: true }),
|
|
);
|
|
} else if (nestedToken.type === "em") {
|
|
// Bold + italic nested tokens
|
|
nestedRuns.push(
|
|
new TextRun({
|
|
text: nestedToken.text,
|
|
bold: true,
|
|
italics: true,
|
|
}),
|
|
);
|
|
}
|
|
}
|
|
runs.push(...nestedRuns);
|
|
} else {
|
|
runs.push(new TextRun({ text: token.text, bold: true }));
|
|
}
|
|
} else if (token.type === "em") {
|
|
// Italic text
|
|
runs.push(
|
|
new TextRun({
|
|
text: token.text ?? token.tokens?.[0]?.text,
|
|
italics: true,
|
|
}),
|
|
);
|
|
} else if (token.type === "codespan") {
|
|
// Inline code
|
|
if (token.text) {
|
|
runs.push(
|
|
new TextRun({ text: token.text, font: "Courier New" }),
|
|
);
|
|
}
|
|
} else if (token.type === "link") {
|
|
// Link - use the link text or fallback to URL
|
|
const linkText = token.text ?? token.href ?? "";
|
|
const linkUrl = token.href ?? "";
|
|
if (linkUrl) {
|
|
runs.push(
|
|
new ExternalHyperlink({
|
|
children: [
|
|
new TextRun({ text: linkText, style: "Hyperlink" }),
|
|
],
|
|
link: linkUrl,
|
|
}),
|
|
);
|
|
} else {
|
|
// Fallback to plain text if no URL
|
|
runs.push(new TextRun(linkText));
|
|
}
|
|
} else if (token.type === "space") {
|
|
// Preserve spaces
|
|
runs.push(new TextRun(" "));
|
|
}
|
|
}
|
|
};
|
|
|
|
processTokens(tokens);
|
|
} catch (error) {
|
|
// Fallback to simple text parsing if marked fails
|
|
console.warn("Marked parsing failed, using fallback:", error);
|
|
// Pattern to match: bold (**text**), italic (*text*), inline code (`text`), links [text](url)
|
|
const pattern =
|
|
/(\*\*(.+?)\*\*)|(\*(.+?)\*)|(`(.+?)`)|\[(.+?)\]\((.+?)\)/g;
|
|
let lastIndex = 0;
|
|
let match;
|
|
|
|
while ((match = pattern.exec(text)) !== null) {
|
|
// Add plain text before the match
|
|
if (match.index > lastIndex) {
|
|
runs.push(new TextRun(text.slice(lastIndex, match.index)));
|
|
}
|
|
|
|
if (match[1]) {
|
|
// Bold: **text**
|
|
const boldText = match[2] ?? "";
|
|
runs.push(new TextRun({ text: boldText, bold: true }));
|
|
} else if (match[3]) {
|
|
// Italic: *text*
|
|
const italicText = match[4] ?? "";
|
|
runs.push(new TextRun({ text: italicText, italics: true }));
|
|
} else if (match[5]) {
|
|
// Inline code: `text`
|
|
const codeText = match[6] ?? "";
|
|
runs.push(new TextRun({ text: codeText, font: "Courier New" }));
|
|
} else if (match[7] && match[8]) {
|
|
// Link: [text](url)
|
|
runs.push(
|
|
new ExternalHyperlink({
|
|
children: [
|
|
new TextRun({ text: match[7] ?? "", style: "Hyperlink" }),
|
|
],
|
|
link: match[8],
|
|
}),
|
|
);
|
|
}
|
|
|
|
lastIndex = pattern.lastIndex;
|
|
}
|
|
|
|
// Add remaining plain text
|
|
if (lastIndex < text.length) {
|
|
runs.push(new TextRun(text.slice(lastIndex)));
|
|
}
|
|
}
|
|
|
|
return runs.length > 0 ? runs : [new TextRun(text)];
|
|
},
|
|
[],
|
|
);
|
|
|
|
// Download report as Word document
|
|
const handleDownloadWord = useCallback(async () => {
|
|
if (!reportId || isDownloading) return;
|
|
const report = useStore.getState().messages.get(reportId);
|
|
if (!report) return;
|
|
|
|
setIsDownloading(true);
|
|
try {
|
|
// Parse markdown content into paragraphs
|
|
const lines = report.content.split("\n");
|
|
const children: Paragraph[] = [];
|
|
|
|
for (const line of lines) {
|
|
if (line.startsWith("# ")) {
|
|
children.push(
|
|
new Paragraph({
|
|
children: parseInlineMarkdown(line.substring(2)),
|
|
heading: HeadingLevel.HEADING_1,
|
|
}),
|
|
);
|
|
} else if (line.startsWith("## ")) {
|
|
children.push(
|
|
new Paragraph({
|
|
children: parseInlineMarkdown(line.substring(3)),
|
|
heading: HeadingLevel.HEADING_2,
|
|
}),
|
|
);
|
|
} else if (line.startsWith("### ")) {
|
|
children.push(
|
|
new Paragraph({
|
|
children: parseInlineMarkdown(line.substring(4)),
|
|
heading: HeadingLevel.HEADING_3,
|
|
}),
|
|
);
|
|
} else if (line.startsWith("- ") || line.startsWith("* ")) {
|
|
// Unordered list item
|
|
children.push(
|
|
new Paragraph({
|
|
children: parseInlineMarkdown(line.substring(2)),
|
|
bullet: { level: 0 },
|
|
}),
|
|
);
|
|
} else if (/^\d+\.\s/.test(line)) {
|
|
// Ordered list item
|
|
const text = line.replace(/^\d+\.\s/, "");
|
|
children.push(
|
|
new Paragraph({
|
|
children: parseInlineMarkdown(text),
|
|
numbering: { reference: "default-numbering", level: 0 },
|
|
}),
|
|
);
|
|
} else if (line.trim()) {
|
|
children.push(
|
|
new Paragraph({
|
|
children: parseInlineMarkdown(line),
|
|
}),
|
|
);
|
|
} else {
|
|
children.push(new Paragraph({ text: "" }));
|
|
}
|
|
}
|
|
|
|
const doc = new Document({
|
|
numbering: {
|
|
config: [
|
|
{
|
|
reference: "default-numbering",
|
|
levels: [
|
|
{
|
|
level: 0,
|
|
format: "decimal",
|
|
text: "%1.",
|
|
alignment: "start",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
sections: [{ children }],
|
|
});
|
|
|
|
const blob = await Packer.toBlob(doc);
|
|
saveAs(blob, `research-report-${getTimestamp()}.docx`);
|
|
} catch (error) {
|
|
console.error("Failed to generate Word document:", error);
|
|
toast.error(t("exportFailed"));
|
|
} finally {
|
|
setIsDownloading(false);
|
|
}
|
|
}, [reportId, getTimestamp, isDownloading, t, parseInlineMarkdown]);
|
|
|
|
// Download report as Image
|
|
const handleDownloadImage = useCallback(async () => {
|
|
if (!reportId || isDownloading) return;
|
|
const report = useStore.getState().messages.get(reportId);
|
|
if (!report) return;
|
|
|
|
setIsDownloading(true);
|
|
let container: HTMLDivElement | null = null;
|
|
try {
|
|
// Create a temporary container with simple styles to avoid color parsing issues
|
|
container = document.createElement("div");
|
|
container.style.cssText =
|
|
"position: absolute; left: -9999px; top: 0; width: 800px; padding: 40px; font-family: Arial, sans-serif; line-height: 1.6; background-color: #ffffff; color: #000000;";
|
|
const styleTag =
|
|
"<style>* { color: #000000; } h1,h2,h3,h4,h5,h6 { color: #333333; } a { color: #0066cc; } code { background-color: #f5f5f5; padding: 2px 4px; } pre { background-color: #f5f5f5; padding: 12px; }</style>";
|
|
const rawHtml = marked(report.content) as string;
|
|
const sanitizedHtml = DOMPurify.sanitize(rawHtml);
|
|
container.innerHTML = styleTag + sanitizedHtml;
|
|
document.body.appendChild(container);
|
|
|
|
const canvas = await html2canvas(container, {
|
|
scale: 2,
|
|
useCORS: true,
|
|
logging: false,
|
|
backgroundColor: "#ffffff",
|
|
});
|
|
|
|
// Promisify toBlob for proper async handling
|
|
const blob = await new Promise<Blob | null>((resolve) => {
|
|
canvas.toBlob((b) => resolve(b), "image/png");
|
|
});
|
|
|
|
if (blob) {
|
|
saveAs(blob, `research-report-${getTimestamp()}.png`);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to generate image:", error);
|
|
toast.error(t("exportFailed"));
|
|
} finally {
|
|
// Ensure container is always removed
|
|
try {
|
|
container?.parentNode?.removeChild(container);
|
|
} catch (error) {
|
|
// Log cleanup errors for better debugging (not just in development)
|
|
console.warn(
|
|
"Failed to remove temporary container during image export cleanup:",
|
|
error,
|
|
);
|
|
// Don't throw - cleanup failures are expected and harmless
|
|
}
|
|
setIsDownloading(false);
|
|
}
|
|
}, [reportId, getTimestamp, isDownloading, t]);
|
|
|
|
const handleEdit = useCallback(() => {
|
|
setEditing((editing) => !editing);
|
|
}, []);
|
|
|
|
// When the research id changes, set the active tab to activities
|
|
useEffect(() => {
|
|
if (!hasReport) {
|
|
setActiveTab("activities");
|
|
}
|
|
}, [hasReport, researchId]);
|
|
|
|
return (
|
|
<div className={cn("h-full w-full", className)}>
|
|
<Card className={cn("relative h-full w-full pt-4", className)}>
|
|
<div className="absolute right-4 flex h-9 items-center justify-center">
|
|
{hasReport && !reportStreaming && (
|
|
<>
|
|
<Tooltip title={t("generatePodcast")}>
|
|
<Button
|
|
className="text-gray-400"
|
|
size="icon"
|
|
variant="ghost"
|
|
disabled={isReplay}
|
|
onClick={handleGeneratePodcast}
|
|
>
|
|
<Headphones />
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip title={t("edit")}>
|
|
<Button
|
|
className="text-gray-400"
|
|
size="icon"
|
|
variant="ghost"
|
|
disabled={isReplay}
|
|
onClick={handleEdit}
|
|
>
|
|
{editing ? <Undo2 /> : <Pencil />}
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip title={t("copy")}>
|
|
<Button
|
|
className="text-gray-400"
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={handleCopy}
|
|
>
|
|
{copied ? <Check /> : <Copy />}
|
|
</Button>
|
|
</Tooltip>
|
|
<DropdownMenu>
|
|
<Tooltip title={t("downloadReport")}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
className="text-gray-400"
|
|
size="icon"
|
|
variant="ghost"
|
|
>
|
|
<Download />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
</Tooltip>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={handleDownloadMarkdown}>
|
|
<FileText className="mr-2 h-4 w-4" />
|
|
{t("downloadMarkdown")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={handleDownloadHTML}>
|
|
<FileCode className="mr-2 h-4 w-4" />
|
|
{t("downloadHTML")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={handleDownloadPDF}
|
|
disabled={isDownloading}
|
|
>
|
|
<FileType className="mr-2 h-4 w-4" />
|
|
{t("downloadPDF")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={handleDownloadWord}
|
|
disabled={isDownloading}
|
|
>
|
|
<FileText className="mr-2 h-4 w-4" />
|
|
{t("downloadWord")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={handleDownloadImage}
|
|
disabled={isDownloading}
|
|
>
|
|
<FileImage className="mr-2 h-4 w-4" />
|
|
{t("downloadImage")}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</>
|
|
)}
|
|
<Tooltip title={t("close")}>
|
|
<Button
|
|
className="text-gray-400"
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => {
|
|
closeResearch();
|
|
}}
|
|
>
|
|
<X />
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
<Tabs
|
|
className="flex h-full w-full flex-col"
|
|
value={activeTab}
|
|
onValueChange={(value) => setActiveTab(value)}
|
|
>
|
|
<div className="flex w-full justify-center">
|
|
<TabsList className="">
|
|
<TabsTrigger
|
|
className="px-8"
|
|
value="report"
|
|
disabled={!hasReport}
|
|
>
|
|
{t("report")}
|
|
</TabsTrigger>
|
|
<TabsTrigger className="px-8" value="activities">
|
|
{t("activities")}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
<TabsContent
|
|
className="h-full min-h-0 flex-grow px-8"
|
|
value="report"
|
|
forceMount
|
|
hidden={activeTab !== "report"}
|
|
>
|
|
<ScrollContainer
|
|
className="h-full px-5 pb-20"
|
|
scrollShadowColor="var(--card)"
|
|
autoScrollToBottom={!hasReport || reportStreaming}
|
|
>
|
|
{reportId && researchId && (
|
|
<ResearchReportBlock
|
|
className="mt-4"
|
|
researchId={researchId}
|
|
messageId={reportId}
|
|
editing={editing}
|
|
/>
|
|
)}
|
|
</ScrollContainer>
|
|
</TabsContent>
|
|
<TabsContent
|
|
className="h-full min-h-0 flex-grow px-8"
|
|
value="activities"
|
|
forceMount
|
|
hidden={activeTab !== "activities"}
|
|
>
|
|
<ScrollContainer
|
|
className="h-full"
|
|
scrollShadowColor="var(--card)"
|
|
autoScrollToBottom={!hasReport || reportStreaming}
|
|
>
|
|
{researchId && (
|
|
<ResearchActivitiesBlock
|
|
className="mt-4"
|
|
researchId={researchId}
|
|
/>
|
|
)}
|
|
</ScrollContainer>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|