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,12 +1,43 @@
-import { MarkdownRenderer } from "@features/editor/components/MarkdownRenderer";
+import {
+  baseComponents,
+  remarkPlugins,
+} from "@features/editor/components/MarkdownRenderer";
 import { File } from "@phosphor-icons/react";
-import { Box, Code } from "@radix-ui/themes";
+import { Box, Code, Text } from "@radix-ui/themes";
 import type { ReactNode } from "react";
+import { memo } from "react";
+import type { Components } from "react-markdown";
+import ReactMarkdown from "react-markdown";
 
 interface UserMessageProps {
   content: string;
 }
 
+/**
+ * Markdown components that render paragraphs as inline spans so that
+ * text chunks between file mentions stay on the same line.
+ */
+const inlineComponents: Components = {
+  ...baseComponents,
+  p: ({ children }) => (
+    <Text as="span" size="1" color="gray" highContrast>
+      {children}
+    </Text>
+  ),
+};
+
+const InlineMarkdown = memo(function InlineMarkdown({
+  content,
+}: {
+  content: string;
+}) {
+  return (
+    <ReactMarkdown remarkPlugins={remarkPlugins} components={inlineComponents}>
+      {content}
+    </ReactMarkdown>
+  );
+});
+
 function parseFileMentions(content: string): ReactNode[] {
   const fileTagRegex = /<file\s+path="([^"]+)"\s*\/>/g;
   const parts: ReactNode[] = [];
@@ -16,7 +47,7 @@ function parseFileMentions(content: string): ReactNode[] {
     if (match.index !== undefined && match.index > lastIndex) {
       const textBefore = content.slice(lastIndex, match.index);
       parts.push(
-        <MarkdownRenderer key={`text-${lastIndex}`} content={textBefore} />,
+        <InlineMarkdown key={`text-${lastIndex}`} content={textBefore} />,
       );
     }
 
@@ -32,6 +63,7 @@ function parseFileMentions(content: string): ReactNode[] {
           alignItems: "center",
           gap: "4px",
           verticalAlign: "middle",
+          margin: "0 6px",
         }}
       >
         <File size={12} />
@@ -44,7 +76,7 @@ function parseFileMentions(content: string): ReactNode[] {
 
   if (lastIndex < content.length) {
     parts.push(
-      <MarkdownRenderer
+      <InlineMarkdown
         key={`text-${lastIndex}`}
         content={content.slice(lastIndex)}
       />,
@@ -66,7 +98,12 @@ export function UserMessage({ content }: UserMessageProps) {
         {hasFileMentions ? (
           parseFileMentions(content)
         ) : (
-          <MarkdownRenderer content={content} />
+          <ReactMarkdown
+            remarkPlugins={remarkPlugins}
+            components={baseComponents}
+          >
+            {content}
+          </ReactMarkdown>
         )}
       </Box>
     </Box>