feat(web): add conversation export as Markdown and JSON (#1002)

* feat(web): add conversation export as Markdown and JSON (#976)

Add the ability to export conversations in Markdown and JSON formats,
accessible from both the chat header and the sidebar context menu.

- Add export utility (formatThreadAsMarkdown, formatThreadAsJSON) with
  support for user/assistant messages, thinking blocks, and tool calls
- Add ExportTrigger component in chat header (appears when messages exist)
- Add Export submenu to sidebar dropdown (fetches full thread state on demand)
- Add i18n translations for en-US and zh-CN

Closes #976

Made-with: Cursor

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update thread creation timestamp to updated_at

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

frontend/src/core/i18n/locales/en-US.ts

@@ -43,6 +43,10 @@ export const enUS: Translations = {
     save: "Save",
     install: "Install",
     create: "Create",
+    export: "Export",
+    exportAsMarkdown: "Export as Markdown",
+    exportAsJSON: "Export as JSON",
+    exportSuccess: "Conversation exported",
   },
 
   // Welcome

frontend/src/core/i18n/locales/types.ts

@@ -32,6 +32,10 @@ export interface Translations {
     save: string;
     install: string;
     create: string;
+    export: string;
+    exportAsMarkdown: string;
+    exportAsJSON: string;
+    exportSuccess: string;
   };
 
   // Welcome

frontend/src/core/i18n/locales/zh-CN.ts

@@ -43,6 +43,10 @@ export const zhCN: Translations = {
     save: "保存",
     install: "安装",
     create: "创建",
+    export: "导出",
+    exportAsMarkdown: "导出为 Markdown",
+    exportAsJSON: "导出为 JSON",
+    exportSuccess: "对话已导出",
   },
 
   // Welcome

frontend/src/core/threads/export.ts

@@ -0,0 +1,142 @@
+import type { Message } from "@langchain/langgraph-sdk";
+
+import {
+  extractContentFromMessage,
+  extractReasoningContentFromMessage,
+  hasContent,
+  hasToolCalls,
+  stripUploadedFilesTag,
+} from "../messages/utils";
+
+import type { AgentThread } from "./types";
+import { titleOfThread } from "./utils";
+
+function formatMessageContent(message: Message): string {
+  const text = extractContentFromMessage(message);
+  if (!text) return "";
+  return stripUploadedFilesTag(text);
+}
+
+function formatToolCalls(message: Message): string {
+  if (message.type !== "ai" || !hasToolCalls(message)) return "";
+  const calls = message.tool_calls ?? [];
+  return calls.map((call) => `- **Tool:** \`${call.name}\``).join("\n");
+}
+
+export function formatThreadAsMarkdown(
+  thread: AgentThread,
+  messages: Message[],
+): string {
+  const title = titleOfThread(thread);
+  const createdAt = thread.created_at
+    ? new Date(thread.created_at).toLocaleString()
+    : "Unknown";
+
+  const lines: string[] = [
+    `# ${title}`,
+    "",
+    `*Exported on ${new Date().toLocaleString()} · Created ${createdAt}*`,
+    "",
+    "---",
+    "",
+  ];
+
+  for (const message of messages) {
+    if (message.type === "human") {
+      const content = formatMessageContent(message);
+      if (content) {
+        lines.push(`## 🧑 User`, "", content, "", "---", "");
+      }
+    } else if (message.type === "ai") {
+      const reasoning = extractReasoningContentFromMessage(message);
+      const content = formatMessageContent(message);
+      const toolCalls = formatToolCalls(message);
+
+      if (!content && !toolCalls && !reasoning) continue;
+
+      lines.push(`## 🤖 Assistant`);
+
+      if (reasoning) {
+        lines.push(
+          "",
+          "<details>",
+          "<summary>Thinking</summary>",
+          "",
+          reasoning,
+          "",
+          "</details>",
+        );
+      }
+
+      if (toolCalls) {
+        lines.push("", toolCalls);
+      }
+
+      if (content && hasContent(message)) {
+        lines.push("", content);
+      }
+
+      lines.push("", "---", "");
+    }
+  }
+
+  return lines.join("\n").trimEnd() + "\n";
+}
+
+export function formatThreadAsJSON(
+  thread: AgentThread,
+  messages: Message[],
+): string {
+  const exportData = {
+    title: titleOfThread(thread),
+    thread_id: thread.thread_id,
+    created_at: thread.created_at,
+    exported_at: new Date().toISOString(),
+    messages: messages.map((msg) => ({
+      type: msg.type,
+      id: msg.id,
+      content: typeof msg.content === "string" ? msg.content : msg.content,
+      ...(msg.type === "ai" && msg.tool_calls?.length
+        ? { tool_calls: msg.tool_calls }
+        : {}),
+    })),
+  };
+  return JSON.stringify(exportData, null, 2);
+}
+
+function sanitizeFilename(name: string): string {
+  return (
+    name.replace(/[^\p{L}\p{N}_\- ]/gu, "").trim() || "conversation"
+  );
+}
+
+export function downloadAsFile(
+  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();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+export function exportThreadAsMarkdown(
+  thread: AgentThread,
+  messages: Message[],
+) {
+  const markdown = formatThreadAsMarkdown(thread, messages);
+  const filename = `${sanitizeFilename(titleOfThread(thread))}.md`;
+  downloadAsFile(markdown, filename, "text/markdown;charset=utf-8");
+}
+
+export function exportThreadAsJSON(thread: AgentThread, messages: Message[]) {
+  const json = formatThreadAsJSON(thread, messages);
+  const filename = `${sanitizeFilename(titleOfThread(thread))}.json`;
+  downloadAsFile(json, filename, "application/json;charset=utf-8");
+}