Merge main into storybook-tool-messages

Author: ammario

bun.lock

@@ -5,10 +5,10 @@
   "main": "dist/main.js",
   "scripts": {
     "dev": "bun run build:main && concurrently -k \"bun run dev:main\" \"bun run dev:renderer\"",
-    "dev:main": "tsc -w -p tsconfig.main.json",
+    "dev:main": "concurrently \"tsc -w -p tsconfig.main.json\" \"tsc-alias -w -p tsconfig.main.json\"",
     "dev:renderer": "vite",
     "build": "bun run build:renderer && bun run build:main && bun run build:preload",
-    "build:main": "tsc -p tsconfig.main.json",
+    "build:main": "tsc -p tsconfig.main.json && tsc-alias -p tsconfig.main.json",
     "build:preload": "bun build src/preload.ts --format=cjs --target=node --external=electron --outfile=dist/preload.js",
     "build:renderer": "vite build",
     "start": "bun build:preload && electron .",
@@ -44,11 +44,14 @@
     "diff": "^8.0.2",
     "jsonc-parser": "^3.3.1",
     "lru-cache": "^11.2.2",
+    "mermaid": "^11.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.6",
+    "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "write-file-atomic": "^6.0.0",
     "zod": "^4.1.11",
     "zod-to-json-schema": "^3.24.6"
@@ -67,6 +70,7 @@
     "@types/bun": "^1.2.23",
     "@types/diff": "^8.0.0",
     "@types/jest": "^30.0.0",
+    "@types/katex": "^0.16.7",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -88,6 +92,7 @@
     "prettier": "^3.6.2",
     "storybook": "^9.1.10",
     "ts-jest": "^29.4.4",
+    "tsc-alias": "^1.8.16",
     "typescript": "^5.1.3",
     "typescript-eslint": "^8.45.0",
     "vite": "^4.4.0",

package.json

@@ -3,6 +3,7 @@ import type { CSSProperties } from "react";
 import React from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Mermaid } from "./Mermaid";
 
 // Create style with colors only (no backgrounds)
 const syntaxStyleNoBackgrounds: Record<string, CSSProperties> = {};
@@ -41,11 +42,16 @@ export const markdownComponents = {
     const isInline = inline ?? !hasMultipleLines;
 
     if (!isInline && language) {
-      // Code block with language - use syntax highlighter
       // Extract text content from children (react-markdown passes string or array of strings)
       const code =
         typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
 
+      // Handle mermaid diagrams
+      if (language === "mermaid") {
+        return <Mermaid chart={code} />;
+      }
+
+      // Code block with language - use syntax highlighter
       return (
         <SyntaxHighlighter
           style={syntaxStyleNoBackgrounds}

src/components/Messages/MarkdownComponents.tsx

@@ -1,6 +1,9 @@
 import React, { useMemo } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import "katex/dist/katex.min.css";
 import { normalizeMarkdown } from "./MarkdownStyles";
 import { markdownComponents } from "./MarkdownComponents";
 
@@ -19,7 +22,11 @@ export const MarkdownCore: React.FC<MarkdownCoreProps> = ({ content, children })
 
   return (
     <>
-      <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]}>
+      <ReactMarkdown
+        components={markdownComponents}
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeKatex]}
+      >
         {normalizedContent}
       </ReactMarkdown>
       {children}

src/components/Messages/MarkdownCore.tsx

@@ -149,6 +149,66 @@ export const markdownStyles = css`
     text-decoration: line-through;
     opacity: 0.6;
   }
+
+  /* Mermaid diagrams */
+  .mermaid-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-x: auto;
+    max-width: 100%;
+
+    svg {
+      min-width: min-content;
+      max-width: none;
+      max-height: var(--diagram-max-height, 300px);
+      height: auto;
+    }
+  }
+
+  /* Mermaid in modal - allow larger sizing */
+  .mermaid-modal {
+    svg {
+      max-width: none;
+      width: auto;
+      max-height: 80vh;
+    }
+  }
+
+  /* Zoom wrapper for mermaid */
+  .react-transform-wrapper {
+    position: relative;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    margin: 1em 0;
+  }
+
+  .react-transform-component {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* KaTeX math rendering */
+  .katex {
+    font-size: 1.1em;
+  }
+
+  .katex-display {
+    margin: 1em 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    > .katex {
+      text-align: center;
+    }
+  }
+
+  /* Math inline */
+  p .katex,
+  li .katex {
+    display: inline;
+  }
 `;
 
 // Normalize markdown to remove excess blank lines