Fix file mentions rendering as block elements in submitted messages

Author: charlesvien

apps/twig/src/renderer/features/editor/components/MarkdownRenderer.tsx

@@ -31,7 +31,7 @@ const HeadingText = ({ children }: { children: React.ReactNode }) => (
   </Text>
 );
 
-const components: Components = {
+export const baseComponents: Components = {
   h1: ({ children }) => <HeadingText>{children}</HeadingText>,
   h2: ({ children }) => <HeadingText>{children}</HeadingText>,
   h3: ({ children }) => <HeadingText>{children}</HeadingText>,
@@ -151,7 +151,7 @@ const components: Components = {
   ),
 };
 
-const remarkPlugins = [remarkGfm];
+export const remarkPlugins = [remarkGfm];
 
 export const MarkdownRenderer = memo(function MarkdownRenderer({
   content,
@@ -161,7 +161,7 @@ export const MarkdownRenderer = memo(function MarkdownRenderer({
     [content],
   );
   return (
-    <ReactMarkdown remarkPlugins={remarkPlugins} components={components}>
+    <ReactMarkdown remarkPlugins={remarkPlugins} components={baseComponents}>
       {processedContent}
     </ReactMarkdown>
   );

apps/twig/src/renderer/features/sessions/components/session-update/UserMessage.tsx

@@ -1,73 +1,77 @@
-import { MarkdownRenderer } from "@features/editor/components/MarkdownRenderer";
-import { File } from "@phosphor-icons/react";
-import { Box, Code } from "@radix-ui/themes";
-import type { ReactNode } from "react";
+import { FileIcon } from "@components/ui/FileIcon";
+import {
+  baseComponents,
+  remarkPlugins,
+} from "@features/editor/components/MarkdownRenderer";
+import { Box, Code, Link } from "@radix-ui/themes";
+import { useMemo } from "react";
+import type { Components } from "react-markdown";
+import ReactMarkdown from "react-markdown";
 
 interface UserMessageProps {
   content: string;
 }
 
-function parseFileMentions(content: string): ReactNode[] {
-  const fileTagRegex = /<file\s+path="([^"]+)"\s*\/>/g;
-  const parts: ReactNode[] = [];
-  let lastIndex = 0;
+/**
+ * Convert `<file path="..." />` XML tags into markdown links with a custom
+ * `twig-file:` protocol so they are parsed as inline elements within paragraphs.
+ */
+function preprocessFileMentions(content: string): string {
+  return content.replace(/<file\s+path="([^"]+)"\s*\/>/g, (_match, path) => {
+    const fileName = path.split("/").pop() ?? path;
+    const safeFileName = fileName.replace(/[[\]]/g, "\\$&");
+    return `[${safeFileName}](twig-file:${encodeURIComponent(path)})`;
+  });
+}
 
-  for (const match of content.matchAll(fileTagRegex)) {
-    if (match.index !== undefined && match.index > lastIndex) {
-      const textBefore = content.slice(lastIndex, match.index);
-      parts.push(
-        <MarkdownRenderer key={`text-${lastIndex}`} content={textBefore} />,
+const userMessageComponents: Components = {
+  ...baseComponents,
+  a: ({ href, children }) => {
+    if (href?.startsWith("twig-file:")) {
+      const filePath = decodeURIComponent(href.slice("twig-file:".length));
+      const fileName = filePath.split("/").pop() ?? filePath;
+      return (
+        <Code
+          size="1"
+          variant="soft"
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "4px",
+            verticalAlign: "middle",
+          }}
+        >
+          <FileIcon filename={fileName} size={12} />
+          {children}
+        </Code>
       );
     }
-
-    const filePath = match[1];
-    const fileName = filePath.split("/").pop() ?? filePath;
-    parts.push(
-      <Code
-        key={`file-${match.index}`}
-        size="1"
-        variant="soft"
-        style={{
-          display: "inline-flex",
-          alignItems: "center",
-          gap: "4px",
-          verticalAlign: "middle",
-        }}
-      >
-        <File size={12} />
-        {fileName}
-      </Code>,
-    );
-
-    lastIndex = (match.index ?? 0) + match[0].length;
-  }
-
-  if (lastIndex < content.length) {
-    parts.push(
-      <MarkdownRenderer
-        key={`text-${lastIndex}`}
-        content={content.slice(lastIndex)}
-      />,
+    return (
+      <Link href={href} target="_blank" rel="noopener noreferrer" size="1">
+        {children}
+      </Link>
     );
-  }
-
-  return parts;
-}
+  },
+};
 
 export function UserMessage({ content }: UserMessageProps) {
-  const hasFileMentions = /<file\s+path="[^"]+"\s*\/>/.test(content);
+  const processedContent = useMemo(
+    () => preprocessFileMentions(content),
+    [content],
+  );
 
   return (
     <Box
       className="border-l-2 bg-gray-2 py-2 pl-3"
       style={{ borderColor: "var(--accent-9)" }}
     >
       <Box className="font-medium [&>*:last-child]:mb-0">
-        {hasFileMentions ? (
-          parseFileMentions(content)
-        ) : (
-          <MarkdownRenderer content={content} />
-        )}
+        <ReactMarkdown
+          remarkPlugins={remarkPlugins}
+          components={userMessageComponents}
+        >
+          {processedContent}
+        </ReactMarkdown>
       </Box>
     </Box>
   );