From a621e08f7bfee552e27f745418776d815a7db22d Mon Sep 17 00:00:00 2001 From: Sai ReddyPadala Date: Thu, 19 Jun 2025 09:49:20 +0530 Subject: [PATCH 1/4] feat: correct Mermaid chart syntax errors and improve error recovery (#4636) Fixed syntax issues in Mermaid diagrams that caused rendering failures Improved error handling to allow users to quickly resend and regenerate faulty Mermaid code Ensured only the problematic diagram is regenerated, preserving the rest of the answer --- src/core/prompts/instructions/fix-mermaid.ts | 12 ++++++ src/core/prompts/instructions/instructions.ts | 6 +++ src/core/webview/webviewMessageHandler.ts | 10 +++++ src/shared/WebviewMessage.ts | 1 + .../src/components/common/MermaidBlock.tsx | 43 ++++++++++++++++++- webview-ui/src/i18n/locales/ca/common.json | 3 +- webview-ui/src/i18n/locales/de/common.json | 3 +- webview-ui/src/i18n/locales/en/common.json | 3 +- webview-ui/src/i18n/locales/es/common.json | 3 +- webview-ui/src/i18n/locales/fr/common.json | 3 +- webview-ui/src/i18n/locales/hi/common.json | 3 +- webview-ui/src/i18n/locales/it/common.json | 3 +- webview-ui/src/i18n/locales/ja/common.json | 3 +- webview-ui/src/i18n/locales/ko/common.json | 3 +- webview-ui/src/i18n/locales/nl/common.json | 3 +- webview-ui/src/i18n/locales/pl/common.json | 3 +- webview-ui/src/i18n/locales/pt-BR/common.json | 3 +- webview-ui/src/i18n/locales/ru/common.json | 3 +- webview-ui/src/i18n/locales/tr/common.json | 3 +- webview-ui/src/i18n/locales/vi/common.json | 3 +- webview-ui/src/i18n/locales/zh-CN/common.json | 3 +- webview-ui/src/i18n/locales/zh-TW/common.json | 3 +- 22 files changed, 104 insertions(+), 19 deletions(-) create mode 100644 src/core/prompts/instructions/fix-mermaid.ts diff --git a/src/core/prompts/instructions/fix-mermaid.ts b/src/core/prompts/instructions/fix-mermaid.ts new file mode 100644 index 0000000000..2b9323c079 --- /dev/null +++ b/src/core/prompts/instructions/fix-mermaid.ts @@ -0,0 +1,12 @@ +export async function createMermaidFixInstructions(error: string, code: string): Promise { + return [ + "Please fix the following Mermaid diagram.", + error ? `Error: ${error}` : "", + "Diagram code:", + "```mermaid", + code, + "```", + ] + .filter(Boolean) + .join("\n\n") +} diff --git a/src/core/prompts/instructions/instructions.ts b/src/core/prompts/instructions/instructions.ts index c1ff2a1899..d1b152fcd7 100644 --- a/src/core/prompts/instructions/instructions.ts +++ b/src/core/prompts/instructions/instructions.ts @@ -3,11 +3,14 @@ import { createModeInstructions } from "./create-mode" import { McpHub } from "../../../services/mcp/McpHub" import { DiffStrategy } from "../../../shared/tools" import * as vscode from "vscode" +import { createMermaidFixInstructions } from "./fix-mermaid" interface InstructionsDetail { mcpHub?: McpHub diffStrategy?: DiffStrategy context?: vscode.ExtensionContext + error: string + code: string } export async function fetchInstructions(text: string, detail: InstructionsDetail): Promise { @@ -18,6 +21,9 @@ export async function fetchInstructions(text: string, detail: InstructionsDetail case "create_mode": { return await createModeInstructions(detail.context) } + case "fix_mermaid": { + return await createMermaidFixInstructions(detail.error, detail.code) + } default: { return "" } diff --git a/src/core/webview/webviewMessageHandler.ts b/src/core/webview/webviewMessageHandler.ts index c5433497dc..e9f907d251 100644 --- a/src/core/webview/webviewMessageHandler.ts +++ b/src/core/webview/webviewMessageHandler.ts @@ -40,6 +40,7 @@ import { getModels, flushModels } from "../../api/providers/fetchers/modelCache" import { GetModelsOptions } from "../../shared/api" import { generateSystemPrompt } from "./generateSystemPrompt" import { getCommand } from "../../utils/commands" +import { fetchInstructions } from "../prompts/instructions/instructions" const ALLOWED_VSCODE_SETTINGS = new Set(["terminal.integrated.inheritEnv"]) @@ -186,6 +187,15 @@ export const webviewMessageHandler = async ( case "askResponse": provider.getCurrentCline()?.handleWebviewAskResponse(message.askResponse!, message.text, message.images) break + case "fixMermaidChart": + const customInstruction = await fetchInstructions( + "fix_mermaid", + message.values as { error: string; code: string }, + ) + provider + .getCurrentCline() + ?.handleWebviewAskResponse(message.askResponse!, customInstruction, message.images) + break case "autoCondenseContext": await updateGlobalState("autoCondenseContext", message.bool) await provider.postStateToWebview() diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts index cbcf0c10e3..f9639565a7 100644 --- a/src/shared/WebviewMessage.ts +++ b/src/shared/WebviewMessage.ts @@ -39,6 +39,7 @@ export interface WebviewMessage { | "webviewDidLaunch" | "newTask" | "askResponse" + | "fixMermaidChart" | "terminalOperation" | "clearTask" | "didShowAnnouncement" diff --git a/webview-ui/src/components/common/MermaidBlock.tsx b/webview-ui/src/components/common/MermaidBlock.tsx index 229b957765..b368b56619 100644 --- a/webview-ui/src/components/common/MermaidBlock.tsx +++ b/webview-ui/src/components/common/MermaidBlock.tsx @@ -94,6 +94,22 @@ export default function MermaidBlock({ code }: MermaidBlockProps) { const { showCopyFeedback, copyWithFeedback } = useCopyToClipboard() const { t } = useAppTranslation() + /** + * Handles the "Fix Mermaid Diagram" button click. + */ + function handleFixMermaidDiagram(e: React.MouseEvent) { + e.stopPropagation() + vscode.postMessage({ + type: "fixMermaidChart", + askResponse: "messageResponse", + values: { + error, + code, + }, + images: [], + }) + } + // 1) Whenever `code` changes, mark that we need to re-render a new chart useEffect(() => { setIsLoading(true) @@ -157,7 +173,7 @@ export default function MermaidBlock({ code }: MermaidBlockProps) { {isLoading && {t("common:mermaid.loading")}} {error ? ( -
+
{t("common:mermaid.render_error")}
-
+
+ {/* Fix Mermaid Diagram Button */} + { e.stopPropagation() const combinedContent = `Error: ${error}\n\n\`\`\`mermaid\n${code}\n\`\`\`` diff --git a/webview-ui/src/i18n/locales/ca/common.json b/webview-ui/src/i18n/locales/ca/common.json index 267e0a62d7..6ded897085 100644 --- a/webview-ui/src/i18n/locales/ca/common.json +++ b/webview-ui/src/i18n/locales/ca/common.json @@ -25,7 +25,8 @@ "save": "Desar imatge", "viewCode": "Veure codi", "viewDiagram": "Veure diagrama", - "close": "Tancar" + "close": "Tancar", + "retry": "Tornar a intentar" }, "modal": { "codeTitle": "Codi Mermaid" diff --git a/webview-ui/src/i18n/locales/de/common.json b/webview-ui/src/i18n/locales/de/common.json index 76b9064bc3..9b6e98f192 100644 --- a/webview-ui/src/i18n/locales/de/common.json +++ b/webview-ui/src/i18n/locales/de/common.json @@ -25,7 +25,8 @@ "save": "Bild speichern", "viewCode": "Code anzeigen", "viewDiagram": "Diagramm anzeigen", - "close": "Schließen" + "close": "Schließen", + "retry": "Wiederholen" }, "modal": { "codeTitle": "Mermaid-Code" diff --git a/webview-ui/src/i18n/locales/en/common.json b/webview-ui/src/i18n/locales/en/common.json index 1488f00f46..92918ed910 100644 --- a/webview-ui/src/i18n/locales/en/common.json +++ b/webview-ui/src/i18n/locales/en/common.json @@ -25,7 +25,8 @@ "save": "Save Image", "viewCode": "View Code", "viewDiagram": "View Diagram", - "close": "Close" + "close": "Close", + "retry": "Retry" }, "modal": { "codeTitle": "Mermaid Code" diff --git a/webview-ui/src/i18n/locales/es/common.json b/webview-ui/src/i18n/locales/es/common.json index 5fe624372f..18f761806c 100644 --- a/webview-ui/src/i18n/locales/es/common.json +++ b/webview-ui/src/i18n/locales/es/common.json @@ -25,7 +25,8 @@ "save": "Guardar imagen", "viewCode": "Ver código", "viewDiagram": "Ver diagrama", - "close": "Cerrar" + "close": "Cerrar", + "retry": "Reintentar" }, "modal": { "codeTitle": "Código Mermaid" diff --git a/webview-ui/src/i18n/locales/fr/common.json b/webview-ui/src/i18n/locales/fr/common.json index 677116ff2a..5b8f7a884e 100644 --- a/webview-ui/src/i18n/locales/fr/common.json +++ b/webview-ui/src/i18n/locales/fr/common.json @@ -25,7 +25,8 @@ "save": "Enregistrer l'image", "viewCode": "Voir le code", "viewDiagram": "Voir le diagramme", - "close": "Fermer" + "close": "Fermer", + "retry": "Réessayer" }, "modal": { "codeTitle": "Code Mermaid" diff --git a/webview-ui/src/i18n/locales/hi/common.json b/webview-ui/src/i18n/locales/hi/common.json index 77876eb274..203ef75be9 100644 --- a/webview-ui/src/i18n/locales/hi/common.json +++ b/webview-ui/src/i18n/locales/hi/common.json @@ -25,7 +25,8 @@ "save": "छवि सहेजें", "viewCode": "कोड देखें", "viewDiagram": "डायग्राम देखें", - "close": "बंद करें" + "close": "बंद करें", + "retry": "पुनः प्रयास करें" }, "modal": { "codeTitle": "मरमेड कोड" diff --git a/webview-ui/src/i18n/locales/it/common.json b/webview-ui/src/i18n/locales/it/common.json index 9d5426aa0e..5a05d1ae67 100644 --- a/webview-ui/src/i18n/locales/it/common.json +++ b/webview-ui/src/i18n/locales/it/common.json @@ -25,7 +25,8 @@ "save": "Salva immagine", "viewCode": "Visualizza codice", "viewDiagram": "Visualizza diagramma", - "close": "Chiudi" + "close": "Chiudi", + "retry": "Riprova" }, "modal": { "codeTitle": "Codice Mermaid" diff --git a/webview-ui/src/i18n/locales/ja/common.json b/webview-ui/src/i18n/locales/ja/common.json index 975ea67834..a726e7db01 100644 --- a/webview-ui/src/i18n/locales/ja/common.json +++ b/webview-ui/src/i18n/locales/ja/common.json @@ -25,7 +25,8 @@ "save": "画像を保存", "viewCode": "コードを表示", "viewDiagram": "ダイアグラムを表示", - "close": "閉じる" + "close": "閉じる", + "retry": "再試行" }, "modal": { "codeTitle": "Mermaidコード" diff --git a/webview-ui/src/i18n/locales/ko/common.json b/webview-ui/src/i18n/locales/ko/common.json index 276f2cb20b..812fac02c5 100644 --- a/webview-ui/src/i18n/locales/ko/common.json +++ b/webview-ui/src/i18n/locales/ko/common.json @@ -25,7 +25,8 @@ "save": "이미지 저장", "viewCode": "코드 보기", "viewDiagram": "다이어그램 보기", - "close": "닫기" + "close": "닫기", + "retry": "다시 시도" }, "modal": { "codeTitle": "머메이드 코드" diff --git a/webview-ui/src/i18n/locales/nl/common.json b/webview-ui/src/i18n/locales/nl/common.json index 012808e51a..0c983369fe 100644 --- a/webview-ui/src/i18n/locales/nl/common.json +++ b/webview-ui/src/i18n/locales/nl/common.json @@ -25,7 +25,8 @@ "save": "Afbeelding opslaan", "viewCode": "Code bekijken", "viewDiagram": "Diagram bekijken", - "close": "Sluiten" + "close": "Sluiten", + "retry": "Opnieuw proberen" }, "modal": { "codeTitle": "Mermaid-code" diff --git a/webview-ui/src/i18n/locales/pl/common.json b/webview-ui/src/i18n/locales/pl/common.json index c72b046c42..54d7c5b74b 100644 --- a/webview-ui/src/i18n/locales/pl/common.json +++ b/webview-ui/src/i18n/locales/pl/common.json @@ -25,7 +25,8 @@ "save": "Zapisz obraz", "viewCode": "Zobacz kod", "viewDiagram": "Zobacz diagram", - "close": "Zamknij" + "close": "Zamknij", + "retry": "Ponów" }, "modal": { "codeTitle": "Kod Mermaid" diff --git a/webview-ui/src/i18n/locales/pt-BR/common.json b/webview-ui/src/i18n/locales/pt-BR/common.json index a911b2366f..cf4dd0d577 100644 --- a/webview-ui/src/i18n/locales/pt-BR/common.json +++ b/webview-ui/src/i18n/locales/pt-BR/common.json @@ -25,7 +25,8 @@ "save": "Salvar imagem", "viewCode": "Ver código", "viewDiagram": "Ver diagrama", - "close": "Fechar" + "close": "Fechar", + "retry": "Tentar novamente" }, "modal": { "codeTitle": "Código Mermaid" diff --git a/webview-ui/src/i18n/locales/ru/common.json b/webview-ui/src/i18n/locales/ru/common.json index e68899a2db..7b8e549a5d 100644 --- a/webview-ui/src/i18n/locales/ru/common.json +++ b/webview-ui/src/i18n/locales/ru/common.json @@ -25,7 +25,8 @@ "save": "Сохранить изображение", "viewCode": "Посмотреть код", "viewDiagram": "Посмотреть диаграмму", - "close": "Закрыть" + "close": "Закрыть", + "retry": "Повторить" }, "modal": { "codeTitle": "Код Mermaid" diff --git a/webview-ui/src/i18n/locales/tr/common.json b/webview-ui/src/i18n/locales/tr/common.json index 23344ca966..2f21460a41 100644 --- a/webview-ui/src/i18n/locales/tr/common.json +++ b/webview-ui/src/i18n/locales/tr/common.json @@ -25,7 +25,8 @@ "save": "Resmi kaydet", "viewCode": "Kodu görüntüle", "viewDiagram": "Diyagramı görüntüle", - "close": "Kapat" + "close": "Kapat", + "retry": "Yeniden Dene" }, "modal": { "codeTitle": "Mermaid Kodu" diff --git a/webview-ui/src/i18n/locales/vi/common.json b/webview-ui/src/i18n/locales/vi/common.json index 16952117ef..7e80141d8e 100644 --- a/webview-ui/src/i18n/locales/vi/common.json +++ b/webview-ui/src/i18n/locales/vi/common.json @@ -25,7 +25,8 @@ "save": "Lưu hình ảnh", "viewCode": "Xem mã", "viewDiagram": "Xem biểu đồ", - "close": "Đóng" + "close": "Đóng", + "retry": "Thử lại" }, "modal": { "codeTitle": "Mã Mermaid" diff --git a/webview-ui/src/i18n/locales/zh-CN/common.json b/webview-ui/src/i18n/locales/zh-CN/common.json index 29f11c7f2f..5a40cd86c0 100644 --- a/webview-ui/src/i18n/locales/zh-CN/common.json +++ b/webview-ui/src/i18n/locales/zh-CN/common.json @@ -25,7 +25,8 @@ "save": "保存图片", "viewCode": "查看代码", "viewDiagram": "查看图表", - "close": "关闭" + "close": "关闭", + "retry": "重试" }, "modal": { "codeTitle": "Mermaid 代码" diff --git a/webview-ui/src/i18n/locales/zh-TW/common.json b/webview-ui/src/i18n/locales/zh-TW/common.json index b8ec7f998e..6d8d714a65 100644 --- a/webview-ui/src/i18n/locales/zh-TW/common.json +++ b/webview-ui/src/i18n/locales/zh-TW/common.json @@ -25,7 +25,8 @@ "save": "儲存圖片", "viewCode": "檢視程式碼", "viewDiagram": "檢視圖表", - "close": "關閉" + "close": "關閉", + "retry": "重試" }, "modal": { "codeTitle": "Mermaid 程式碼" From 355523eda10c40e8eb68591b6b76c2d7a0d1463a Mon Sep 17 00:00:00 2001 From: Sai ReddyPadala Date: Thu, 19 Jun 2025 09:53:10 +0530 Subject: [PATCH 2/4] fix : optional parameters added --- src/core/prompts/instructions/instructions.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/prompts/instructions/instructions.ts b/src/core/prompts/instructions/instructions.ts index d1b152fcd7..885ca9b33c 100644 --- a/src/core/prompts/instructions/instructions.ts +++ b/src/core/prompts/instructions/instructions.ts @@ -9,8 +9,8 @@ interface InstructionsDetail { mcpHub?: McpHub diffStrategy?: DiffStrategy context?: vscode.ExtensionContext - error: string - code: string + error?: string + code?: string } export async function fetchInstructions(text: string, detail: InstructionsDetail): Promise { From b758065701477e90e13cdcea63311723dfd21488 Mon Sep 17 00:00:00 2001 From: Sai ReddyPadala Date: Thu, 19 Jun 2025 09:53:55 +0530 Subject: [PATCH 3/4] fix : optional parameters added --- src/core/prompts/instructions/instructions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/prompts/instructions/instructions.ts b/src/core/prompts/instructions/instructions.ts index 885ca9b33c..929caa220d 100644 --- a/src/core/prompts/instructions/instructions.ts +++ b/src/core/prompts/instructions/instructions.ts @@ -22,7 +22,7 @@ export async function fetchInstructions(text: string, detail: InstructionsDetail return await createModeInstructions(detail.context) } case "fix_mermaid": { - return await createMermaidFixInstructions(detail.error, detail.code) + return await createMermaidFixInstructions(detail.error || "", detail.code || "") } default: { return "" From 99f6209e34faf131980802d671032c9e9d6a3559 Mon Sep 17 00:00:00 2001 From: Sai ReddyPadala Date: Thu, 19 Jun 2025 12:59:12 +0530 Subject: [PATCH 4/4] fix : locale issue fix --- webview-ui/src/i18n/locales/id/common.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webview-ui/src/i18n/locales/id/common.json b/webview-ui/src/i18n/locales/id/common.json index d50246ced2..48a7e83713 100644 --- a/webview-ui/src/i18n/locales/id/common.json +++ b/webview-ui/src/i18n/locales/id/common.json @@ -25,7 +25,8 @@ "save": "Simpan Gambar", "viewCode": "Lihat Kode", "viewDiagram": "Lihat Diagram", - "close": "Tutup" + "close": "Tutup", + "retry":"Coba Lagi" }, "modal": { "codeTitle": "Kode Mermaid"