xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-09 19:46:37 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix the bug that only the last msg was exported

Browse Source
This commit is contained in:
dakai 2023-04-19 22:49:06 +08:00
parent 7fa49ca3c1
commit 92cab06100
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/chat.tsx
View File

@ -559,8 +559,8 @@ export function Chat(props: {
); );
}; };
const exportToImage = () => { const exportToImage = (i: number) => {
if (divRef.current) { if (divRefs.current[i]) {
//get the color style from a div by classname 'markdown-body' //get the color style from a div by classname 'markdown-body'
const divElement = document.querySelector( const divElement = document.querySelector(
".markdown-body", ".markdown-body",
@ -570,11 +570,11 @@ export function Chat(props: {
.getPropertyValue("color"); .getPropertyValue("color");
console.log(color); console.log(color);
if (color !== "rgb(36, 41, 47)") { if (color !== "rgb(36, 41, 47)") {
divRef.current.style.backgroundColor = "#1e1e1e"; divRefs.current[i].style.backgroundColor = "#1e1e1e";
} }
divRef.current.style.padding = "10px 10px 0px 10px"; divRefs.current[i].style.padding = "10px 10px 0px 10px";
html2canvas(divRef.current).then((canvas) => { html2canvas(divRefs.current[i]).then((canvas) => {
const imgData = canvas.toDataURL("image/png"); const imgData = canvas.toDataURL("image/png");
const img = new Image(); const img = new Image();
img.src = imgData; img.src = imgData;
@ -583,8 +583,8 @@ export function Chat(props: {
link.download = "chat.png"; link.download = "chat.png";
link.click(); link.click();
}); });
divRef.current.style.padding = "0px"; divRefs.current[i].style.padding = "0px";
divRef.current.style.backgroundColor = ""; divRefs.current[i].style.backgroundColor = "";
} }
}; };
@ -669,7 +669,7 @@ export function Chat(props: {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
const divRef = useRef<HTMLDivElement>(null); const divRefs = useRef<Array<HTMLDivElement>>([]);
return ( return (
<div className={styles.chat} key={session.id}> <div className={styles.chat} key={session.id}>
<div className={styles["window-header"]}> <div className={styles["window-header"]}>
@ -800,13 +800,17 @@ export function Chat(props: {
</div> </div>
<div <div
className={styles["chat-message-top-action"]} className={styles["chat-message-top-action"]}
onClick={() => exportToImage()} onClick={() => exportToImage(i)}
> >
{"Image"} {"Image"}
</div> </div>
</div> </div>
)} )}
<div ref={divRef}> <div
ref={(el) => {
el ? (divRefs.current[i] = el) : null;
}}
>
<Markdown <Markdown
content={message.content} content={message.content}
loading={ loading={