feat: add download messages button with format selection (#423)

GenerQAQ · claude · web-flow · commit 9878f7acdd1a · 2026-03-15T17:08:44.000+08:00
Add a dropdown Download button on the messages page that allows
exporting all session messages in different API formats (OpenAI,
Anthropic, Gemini, Acontext). Messages are fetched in full via
cursor-based pagination and downloaded as JSON.

Co-authored-by: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/dashboard/app/project/[id]/session/[sessionId]/messages/messages-page-client.tsx b/dashboard/app/project/[id]/session/[sessionId]/messages/messages-page-client.tsx
@@ -29,6 +29,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Loader2,
   Plus,
@@ -49,9 +55,10 @@ import {
   HardDrive,
   StickyNote,
   Flag,
+  Download,
 } from "lucide-react";
 import { Project, Message, SessionEvent, TimelineItem, Part } from "@/types";
-import { getMessages, sendMessage, getSessionConfigs } from "../../actions";
+import { getMessages, sendMessage, getSessionConfigs, downloadMessages } from "../../actions";
 import { toast } from "sonner";
 import {
   generateTempId,
@@ -465,6 +472,28 @@ export function MessagesPageClient({
     }
   };
 
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownload = async (format: "acontext" | "openai" | "anthropic" | "gemini") => {
+    setIsDownloading(true);
+    try {
+      const data = await downloadMessages(project.id, sessionId, format);
+      const blob = new Blob([data], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `messages-${sessionId}-${format}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+      toast.success(`Downloaded messages in ${format} format`);
+    } catch (error) {
+      console.error("Failed to download messages:", error);
+      toast.error("Failed to download messages");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
   const handleGoBack = () => {
     const encodedProjectId = encodeId(project.id);
     router.push(`/project/${encodedProjectId}/session`);
@@ -499,6 +528,35 @@ export function MessagesPageClient({
               <Plus className="h-4 w-4" />
               Create Message
             </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  disabled={isLoadingMessages || isDownloading || allMessages.length === 0}
+                >
+                  {isDownloading ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Download className="h-4 w-4" />
+                  )}
+                  Download
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => handleDownload("openai")}>
+                  OpenAI
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleDownload("anthropic")}>
+                  Anthropic
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleDownload("gemini")}>
+                  Gemini
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleDownload("acontext")}>
+                  Acontext
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
             <Button
               variant="outline"
               onClick={handleRefreshMessages}
diff --git a/dashboard/app/project/[id]/session/actions.ts b/dashboard/app/project/[id]/session/actions.ts
@@ -96,6 +96,21 @@ export async function getMessages(
   }
 }
 
+export async function downloadMessages(
+  projectId: string,
+  sessionId: string,
+  format: "acontext" | "openai" | "anthropic" | "gemini"
+): Promise<string> {
+  try {
+    const client = new AcontextClient();
+    const data = await client.downloadMessages(projectId, sessionId, format);
+    return JSON.stringify(data, null, 2);
+  } catch (error) {
+    console.error("Failed to download messages:", error);
+    throw error;
+  }
+}
+
 export async function sendMessage(
   projectId: string,
   sessionId: string,
diff --git a/dashboard/lib/acontext/operations/message.ts b/dashboard/lib/acontext/operations/message.ts
@@ -97,6 +97,42 @@ export function MessageOperations<T extends Constructor<BaseClient>>(Base: T) {
       };
     }
 
+    async downloadMessages(
+      projectId: string,
+      sessionId: string,
+      format: "acontext" | "openai" | "anthropic" | "gemini"
+    ): Promise<unknown> {
+      let allItems: unknown[] = [];
+      let cursor: string | undefined;
+      let hasMore = true;
+
+      while (hasMore) {
+        const params = new URLSearchParams({
+          limit: "100",
+          format,
+        });
+        if (cursor) {
+          params.append("cursor", cursor);
+        }
+
+        const result = await this.request<{
+          items?: unknown[];
+          messages?: unknown[];
+          next_cursor?: string;
+          has_more?: boolean;
+        }>(`/api/v1/session/${sessionId}/messages?${params.toString()}`, {
+          projectId,
+        });
+
+        const items = result.items || result.messages || [];
+        allItems = allItems.concat(items);
+        cursor = result.next_cursor;
+        hasMore = result.has_more || false;
+      }
+
+      return allItems;
+    }
+
     async sendMessage(
       projectId: string,
       sessionId: string,
diff --git a/src/server/ui/app/session/[sessionId]/messages/page.tsx b/src/server/ui/app/session/[sessionId]/messages/page.tsx
@@ -36,9 +36,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Loader2, Plus, RefreshCw, Upload, X, ArrowLeft, FileText, Image as ImageIcon, Video, Music, File, Code, CheckCircle2, ExternalLink, Brain, ShieldOff, HardDrive, StickyNote, Flag } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Loader2, Plus, RefreshCw, Upload, X, ArrowLeft, FileText, Image as ImageIcon, Video, Music, File, Code, CheckCircle2, ExternalLink, Brain, ShieldOff, HardDrive, StickyNote, Flag, Download } from "lucide-react";
 import Image from "next/image";
-import { getMessages, storeMessage, getSessionConfigs } from "@/app/session/actions";
+import { getMessages, storeMessage, getSessionConfigs, downloadMessages } from "@/app/session/actions";
 import {
   Message,
   SessionEvent,
@@ -470,6 +476,32 @@ export default function MessagesPage() {
     }
   };
 
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownload = async (format: "acontext" | "openai" | "anthropic" | "gemini") => {
+    setIsDownloading(true);
+    try {
+      const result = await downloadMessages(sessionId, format);
+      if (!result.success || !result.data) {
+        toast.error(t("downloadFailed"));
+        return;
+      }
+      const blob = new Blob([result.data], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `messages-${sessionId}-${format}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+      toast.success(t("downloadSuccess"));
+    } catch (error) {
+      console.error("Failed to download messages:", error);
+      toast.error(t("downloadFailed"));
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
   const handleGoBack = () => {
     router.push("/session");
   };
@@ -504,6 +536,35 @@ export default function MessagesPage() {
               <Plus className="h-4 w-4" />
               {t("createMessage")}
             </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  disabled={isLoadingMessages || isDownloading || allMessages.length === 0}
+                >
+                  {isDownloading ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Download className="h-4 w-4" />
+                  )}
+                  {t("download")}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => handleDownload("openai")}>
+                  OpenAI
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleDownload("anthropic")}>
+                  Anthropic
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleDownload("gemini")}>
+                  Gemini
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleDownload("acontext")}>
+                  Acontext
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
             <Button
               variant="outline"
               onClick={handleRefreshMessages}
diff --git a/src/server/ui/app/session/actions.ts b/src/server/ui/app/session/actions.ts
@@ -171,6 +171,50 @@ export async function getMessages(
   }
 }
 
+export async function downloadMessages(
+  session_id: string,
+  format: "acontext" | "openai" | "anthropic" | "gemini"
+): Promise<ApiResponse<string>> {
+  try {
+    let allItems: unknown[] = [];
+    let cursor: string | undefined;
+    let hasMore = true;
+
+    while (hasMore) {
+      const params = new URLSearchParams({
+        limit: "100",
+        format,
+      });
+      if (cursor) {
+        params.append("cursor", cursor);
+      }
+
+      const response = await fetch(
+        `${API_SERVER_URL}/api/v1/session/${session_id}/messages?${params.toString()}`,
+        {
+          method: "GET",
+          headers: getAuthHeaders(),
+        }
+      );
+
+      if (!response.ok) {
+        const text = await response.text();
+        return { success: false, error: text };
+      }
+
+      const result = await response.json();
+      const items = result.items || result.messages || [];
+      allItems = allItems.concat(items);
+      cursor = result.next_cursor;
+      hasMore = result.has_more || false;
+    }
+
+    return { success: true, data: JSON.stringify(allItems, null, 2) };
+  } catch (error) {
+    return handleError(error, "downloadMessages");
+  }
+}
+
 export async function storeMessage(
   session_id: string,
   role: MessageRole,
diff --git a/src/server/ui/messages/en.json b/src/server/ui/messages/en.json
@@ -213,7 +213,10 @@
     "eventPath": "Path",
     "eventNote": "Note",
     "eventText": "Text",
-    "eventCreatedAt": "Event Created At"
+    "eventCreatedAt": "Event Created At",
+    "download": "Download",
+    "downloadSuccess": "Messages downloaded successfully",
+    "downloadFailed": "Failed to download messages"
   },
   "agentSkills": {
     "title": "Agent Skills",
diff --git a/src/server/ui/messages/zh.json b/src/server/ui/messages/zh.json
@@ -213,7 +213,10 @@
     "eventPath": "路径",
     "eventNote": "备注",
     "eventText": "文本",
-    "eventCreatedAt": "事件创建时间"
+    "eventCreatedAt": "事件创建时间",
+    "download": "下载",
+    "downloadSuccess": "消息下载成功",
+    "downloadFailed": "消息下载失败"
   },
   "agentSkills": {
     "title": "Agent Skills",
