fix: improve error message when exporting long conversations as image

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/conversations/conversation-detail-panel.tsx

@@ -71,6 +71,7 @@ import {
   exportAsHtml,
   exportAsImage,
   exportAsMarkdown,
+  ExportTooLongError,
   type ExportLabels,
 } from "@/lib/export-conversation"
 
@@ -1275,7 +1276,11 @@ export function ConversationDetailPanel() {
       toast.success(t("exportSuccess"))
     } catch (err) {
       updateTask(taskId, { status: "failed" })
-      toast.error(t("exportFailed"))
+      if (err instanceof ExportTooLongError) {
+        toast.error(t("exportImageTooLong"))
+      } else {
+        toast.error(t("exportFailed"))
+      }
       console.error("[ConversationDetailPanel] export image:", err)
     }
   }, [getExportData, t, addTask, updateTask])

src/i18n/messages/ar.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "تم تصدير المحادثة",
       "exportFailed": "فشل التصدير",
+      "exportImageTooLong": "المحادثة طويلة جداً ولا يمكن تصديرها كصورة",
       "exportLabels": {
         "untitledConversation": "محادثة بدون عنوان",
         "agent": "الوكيل",

src/i18n/messages/de.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "Konversation exportiert",
       "exportFailed": "Export fehlgeschlagen",
+      "exportImageTooLong": "Konversation ist zu lang für den Bildexport",
       "exportLabels": {
         "untitledConversation": "Unbenannte Konversation",
         "agent": "Agent",

src/i18n/messages/en.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "Conversation exported",
       "exportFailed": "Export failed",
+      "exportImageTooLong": "Conversation is too long to export as image",
       "exportLabels": {
         "untitledConversation": "Untitled Conversation",
         "agent": "Agent",

src/i18n/messages/es.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "Conversación exportada",
       "exportFailed": "Error al exportar",
+      "exportImageTooLong": "La conversación es demasiado larga para exportar como imagen",
       "exportLabels": {
         "untitledConversation": "Conversación sin título",
         "agent": "Agente",

src/i18n/messages/fr.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "Conversation exportée",
       "exportFailed": "Échec de l'exportation",
+      "exportImageTooLong": "La conversation est trop longue pour être exportée en image",
       "exportLabels": {
         "untitledConversation": "Conversation sans titre",
         "agent": "Agent",

src/i18n/messages/ja.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "会話をエクスポートしました",
       "exportFailed": "エクスポートに失敗しました",
+      "exportImageTooLong": "会話が長すぎるため、画像としてエクスポートできません",
       "exportLabels": {
         "untitledConversation": "無題の会話",
         "agent": "エージェント",

src/i18n/messages/ko.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "대화를 내보냈습니다",
       "exportFailed": "내보내기 실패",
+      "exportImageTooLong": "대화가 너무 길어 이미지로 내보낼 수 없습니다",
       "exportLabels": {
         "untitledConversation": "제목 없는 대화",
         "agent": "에이전트",

src/i18n/messages/pt.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "Conversa exportada",
       "exportFailed": "Falha ao exportar",
+      "exportImageTooLong": "A conversa é muito longa para exportar como imagem",
       "exportLabels": {
         "untitledConversation": "Conversa sem título",
         "agent": "Agente",

src/i18n/messages/zh-CN.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "会话已导出",
       "exportFailed": "导出失败",
+      "exportImageTooLong": "会话内容过长，不支持导出为图片",
       "exportLabels": {
         "untitledConversation": "未命名会话",
         "agent": "代理",

src/i18n/messages/zh-TW.json

@@ -743,6 +743,7 @@
       "exportHtml": "HTML",
       "exportSuccess": "對話已匯出",
       "exportFailed": "匯出失敗",
+      "exportImageTooLong": "對話內容過長，不支援匯出為圖片",
       "exportLabels": {
         "untitledConversation": "未命名對話",
         "agent": "代理",

src/lib/export-conversation.ts

@@ -445,6 +445,13 @@ export function exportAsHtml(data: ExportConversationData): void {
 // Safari caps at 16384, Chrome at ~32767. Use a safe limit.
 const MAX_IMAGE_HEIGHT = 16000
 
+export class ExportTooLongError extends Error {
+  constructor() {
+    super("Content too long for image export")
+    this.name = "ExportTooLongError"
+  }
+}
+
 export async function exportAsImage(
   data: ExportConversationData
 ): Promise<void> {
@@ -477,11 +484,16 @@ export async function exportAsImage(
     })
 
     const target = iframeDoc.querySelector(".container") ?? body
-    const dataUrl = await toPng(target as HTMLElement, {
+    let dataUrl: string
-      width: 800,
+    try {
-      pixelRatio: 2,
+      dataUrl = await toPng(target as HTMLElement, {
-      backgroundColor: "#f9fafb",
+        width: 800,
-    })
+        pixelRatio: 2,
+        backgroundColor: "#f9fafb",
+      })
+    } catch {
+      throw new ExportTooLongError()
+    }
     const res = await fetch(dataUrl)
     const blob = await res.blob()
     const url = URL.createObjectURL(blob)