snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)

packages/excalidraw/components/TTDDialog/TTDDialogOutput.tsx

@@ -0,0 +1,122 @@
+import clsx from "clsx";
+
+import { Button } from "../Button";
+import Spinner from "../Spinner";
+import { t } from "../../i18n";
+import { alertTriangleIcon } from "../icons";
+
+import {
+  formatMermaidParseErrorMessage,
+  getMermaidSyntaxErrorGuidance,
+  isMermaidCaretLine,
+} from "./utils/mermaidError";
+
+interface TTDDialogOutputProps {
+  error: Error | null;
+  canvasRef: React.RefObject<HTMLDivElement | null>;
+  loaded: boolean;
+  hideErrorDetails?: boolean;
+  sourceText?: string;
+  autoFixAvailable?: boolean;
+  onApplyAutoFix?: () => void;
+}
+
+export const TTDDialogOutput = ({
+  error,
+  canvasRef,
+  loaded,
+  hideErrorDetails,
+  sourceText,
+  autoFixAvailable,
+  onApplyAutoFix,
+}: TTDDialogOutputProps) => {
+  const errorMessage = error
+    ? hideErrorDetails
+      ? t("chat.errors.mermaidParseError")
+      : formatMermaidParseErrorMessage(error.message)
+    : null;
+  const syntaxGuidance =
+    error && !hideErrorDetails
+      ? getMermaidSyntaxErrorGuidance(error.message, sourceText)
+      : null;
+  const showAutoFixButton =
+    !!autoFixAvailable && !!onApplyAutoFix && !hideErrorDetails;
+
+  const errorMessageLines = errorMessage?.split(/\r?\n/) ?? [];
+
+  return (
+    <div
+      className={`ttd-dialog-output-wrapper ${
+        error ? "ttd-dialog-output-wrapper--error" : ""
+      }`}
+    >
+      {error && (
+        <div
+          key="error"
+          data-testid="ttd-dialog-output-error"
+          className="ttd-dialog-output-error"
+        >
+          <div className="ttd-dialog-output-error-content">
+            <div className="ttd-dialog-output-error-icon">
+              {alertTriangleIcon}
+            </div>
+            {syntaxGuidance && (
+              <div className="ttd-dialog-output-error-summary">
+                <div className="ttd-dialog-output-error-summary__headline">
+                  {syntaxGuidance.summary}
+                </div>
+                <div className="ttd-dialog-output-error-summary__label">
+                  Likely causes:
+                </div>
+                <ul className="ttd-dialog-output-error-summary__causes">
+                  {syntaxGuidance.likelyCauses.map((cause) => (
+                    <li key={cause}>{cause}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            <div className="ttd-dialog-output-error-message">
+              {errorMessageLines.map((line, index) => (
+                <span
+                  key={`error-line-${index}`}
+                  className={
+                    isMermaidCaretLine(line)
+                      ? "ttd-dialog-output-error-message__caret"
+                      : undefined
+                  }
+                >
+                  {line}
+                  {index < errorMessageLines.length - 1 ? "\n" : ""}
+                </span>
+              ))}
+            </div>
+            {!hideErrorDetails && (
+              <div className="ttd-dialog-output-error-autofix-slot">
+                {showAutoFixButton ? (
+                  <Button
+                    className="ttd-dialog-panel-button ttd-dialog-output-error-autofix"
+                    onSelect={onApplyAutoFix}
+                  >
+                    {t("mermaid.autoFixAvailable")}
+                  </Button>
+                ) : null}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      {loaded ? (
+        <div
+          key="canvas"
+          className={clsx("ttd-dialog-output-canvas-container", {
+            invisible: !!error,
+          })}
+        >
+          <div ref={canvasRef} className="ttd-dialog-output-canvas-content" />
+        </div>
+      ) : (
+        <Spinner size="2rem" />
+      )}
+    </div>
+  );
+};