|
| 1 | +import {useEffect, useState} from "react"; |
| 2 | + |
| 3 | +import {fetchChatSession, type ChatSessionSnapshot, type ChatVisibleMessage} from "../../data/chat"; |
| 4 | +import {visibleAgentMessage} from "./answer-text"; |
| 5 | +import {readWorkspaceLocale} from "./i18n"; |
| 6 | +import {MarkdownText} from "./markdown"; |
| 7 | +import "./personal-workspace.css"; |
| 8 | +import "./goal-loopx-mode.css"; |
| 9 | +import "./answer-report-page.css"; |
| 10 | + |
| 11 | +type ReportState = |
| 12 | + | {kind: "loading"} |
| 13 | + | {kind: "ready"; snapshot: ChatSessionSnapshot; message: ChatVisibleMessage} |
| 14 | + | {kind: "missing"} |
| 15 | + | {kind: "error"}; |
| 16 | + |
| 17 | +export function AnswerReportPage({sessionId, messageId, statusUrl}: { |
| 18 | + sessionId: string; |
| 19 | + messageId: string; |
| 20 | + statusUrl: string; |
| 21 | +}) { |
| 22 | + const [state, setState] = useState<ReportState>({kind: "loading"}); |
| 23 | + const [copied, setCopied] = useState(false); |
| 24 | + const [copyFailed, setCopyFailed] = useState(false); |
| 25 | + const zh = readWorkspaceLocale() === "zh-CN"; |
| 26 | + |
| 27 | + useEffect(() => { |
| 28 | + let live = true; |
| 29 | + const previousTitle = document.title; |
| 30 | + document.title = zh ? "答复记录 · LoopX" : "Answer record · LoopX"; |
| 31 | + setState({kind: "loading"}); |
| 32 | + void fetchChatSession(sessionId).then((snapshot) => { |
| 33 | + if (!live) return; |
| 34 | + const message = snapshot.messages.find((item) => item.message_id === messageId |
| 35 | + && ["agent", "assistant"].includes(item.role)); |
| 36 | + setState(message ? {kind: "ready", snapshot, message} : {kind: "missing"}); |
| 37 | + }).catch(() => { if (live) setState({kind: "error"}); }); |
| 38 | + return () => { live = false; document.title = previousTitle; }; |
| 39 | + }, [sessionId, messageId, zh]); |
| 40 | + |
| 41 | + const currentUrl = new URL(window.location.href); |
| 42 | + currentUrl.searchParams.delete("reportSessionId"); |
| 43 | + currentUrl.searchParams.delete("reportMessageId"); |
| 44 | + currentUrl.searchParams.set("goalId", state.kind === "ready" && state.snapshot.session.goal_id !== "loopx-manager" |
| 45 | + ? state.snapshot.session.goal_id : ""); |
| 46 | + if (statusUrl) currentUrl.searchParams.set("statusUrl", statusUrl); |
| 47 | + const workspaceUrl = currentUrl.toString(); |
| 48 | + const closeOrReturn = () => { |
| 49 | + if (window.opener) window.close(); |
| 50 | + else window.location.assign(workspaceUrl); |
| 51 | + }; |
| 52 | + |
| 53 | + const answer = state.kind === "ready" ? state.message : null; |
| 54 | + const answerText = answer ? visibleAgentMessage(answer.text) : ""; |
| 55 | + const sourceQuestion = state.kind === "ready" |
| 56 | + ? state.snapshot.messages.find((item) => item.turn_id === answer?.turn_id && item.role === "user") |
| 57 | + : null; |
| 58 | + const created = answer?.created_at ? new Date(answer.created_at) : null; |
| 59 | + const dateLabel = created && !Number.isNaN(created.valueOf()) |
| 60 | + ? new Intl.DateTimeFormat(zh ? "zh-CN" : "en", {dateStyle: "medium", timeStyle: "short"}).format(created) |
| 61 | + : null; |
| 62 | + |
| 63 | + return <main className="answer-report-page"> |
| 64 | + <div className="answer-report-shell"> |
| 65 | + <header className="answer-report-header"> |
| 66 | + <div><span className="answer-report-brand">LoopX</span><span className="answer-report-context"> |
| 67 | + {state.kind === "ready" && state.snapshot.session.goal_id !== "loopx-manager" |
| 68 | + ? state.snapshot.session.goal_id : zh ? "管家" : "Steward"} |
| 69 | + </span></div> |
| 70 | + <button type="button" onClick={closeOrReturn}>{zh ? "返回对话" : "Back to conversation"}</button> |
| 71 | + </header> |
| 72 | + <article className="answer-report-body"> |
| 73 | + <div className="answer-report-heading"><div><small>{zh ? "已保存的答复" : "Saved answer"}</small> |
| 74 | + <h1>{zh ? "完整答复" : "Full answer"}</h1> |
| 75 | + {dateLabel ? <p><time dateTime={answer?.created_at}>{dateLabel}</time></p> : null} |
| 76 | + </div>{answer ? <button type="button" onClick={() => { |
| 77 | + setCopyFailed(false); |
| 78 | + void navigator.clipboard.writeText(answerText).then(() => setCopied(true)).catch(() => { |
| 79 | + setCopied(false); |
| 80 | + setCopyFailed(true); |
| 81 | + }); |
| 82 | + }}>{copied ? (zh ? "已复制 Markdown" : "Markdown copied") : (zh ? "复制 Markdown" : "Copy Markdown")}</button> : null}</div> |
| 83 | + {copyFailed ? <p role="alert">{zh ? "复制失败。请从正文中选中并复制。" : "Copy failed. Select and copy the answer text instead."}</p> : null} |
| 84 | + {state.kind === "loading" ? <p role="status">{zh ? "正在读取已保存的答复…" : "Loading the saved answer…"}</p> : null} |
| 85 | + {state.kind === "error" ? <p role="alert">{zh ? "暂时无法读取这份答复；请检查本机 LoopX 服务。" : "Could not load this answer. Check the local LoopX service."}</p> : null} |
| 86 | + {state.kind === "missing" ? <p role="alert">{zh ? "找不到这份答复。它可能已被清理，或链接有误。" : "This answer was not found. It may have been removed, or the link may be incorrect."}</p> : null} |
| 87 | + {answer ? <> |
| 88 | + <div className="answer-report-content"><MarkdownText text={answerText}/></div> |
| 89 | + <footer><p>{zh ? "来自本机保存的对话消息；打开此页不会重新运行 Agent。" : "From a locally saved conversation message. Opening this page does not rerun the Agent."}</p> |
| 90 | + <details><summary>{zh ? "来源与版本" : "Source and version"}</summary> |
| 91 | + <dl><dt>{zh ? "消息" : "Message"}</dt><dd><code>{answer.message_id}</code></dd> |
| 92 | + <dt>Session</dt><dd><code>{sessionId}</code></dd></dl> |
| 93 | + {sourceQuestion?.text ? <p><strong>{zh ? "原问题：" : "Original question: "}</strong>{sourceQuestion.text}</p> : null} |
| 94 | + </details> |
| 95 | + </footer> |
| 96 | + </> : null} |
| 97 | + </article> |
| 98 | + </div> |
| 99 | + </main>; |
| 100 | +} |
0 commit comments