fix(frontend): preserve unhandled text directives

frontend/src/components/Markdown.tsx

@@ -2,7 +2,7 @@ import { cn } from '@/lib/utils';
 import { omit } from 'lodash';
 import { useContext, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { PluggableList } from 'react-markdown/lib';
+import type { PluggableList, RemarkRehypeOptions } from 'react-markdown/lib';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
 import remarkDirective from 'remark-directive';
@@ -43,6 +43,55 @@ interface Props {
   className?: string;
 }
 
+type TextDirectiveHandler = NonNullable<
+  NonNullable<RemarkRehypeOptions['handlers']>['textDirective']
+>;
+
+const hasOwn = Object.prototype.hasOwnProperty;
+
+// Preserve the original syntax unless another plugin explicitly mapped the
+// directive to a hast node.
+const preserveUnhandledTextDirective: TextDirectiveHandler = (state, node) => {
+  const data = node.data || {};
+  const hasHastData = ['hName', 'hProperties', 'hChildren'].some((key) =>
+    hasOwn.call(data, key)
+  );
+
+  if (hasHastData) {
+    const result = {
+      type: 'element' as const,
+      tagName: 'div',
+      properties: {},
+      children: state.all(node)
+    };
+
+    state.patch(node, result);
+    return state.applyData(node, result);
+  }
+
+  const source = state.options.file?.value;
+  const start = node.position?.start.offset;
+  const end = node.position?.end.offset;
+  const result = {
+    type: 'text' as const,
+    value:
+      typeof source === 'string' &&
+      typeof start === 'number' &&
+      typeof end === 'number'
+        ? source.slice(start, end)
+        : `:${node.name}`
+  };
+
+  state.patch(node, result);
+  return result;
+};
+
+const remarkRehypeOptions: Readonly<RemarkRehypeOptions> = {
+  handlers: {
+    textDirective: preserveUnhandledTextDirective
+  }
+};
+
 const cursorPlugin = () => {
   return (tree: any) => {
     visit(tree, 'text', (node: any, index, parent) => {
@@ -139,6 +188,7 @@ const Markdown = ({
     <ReactMarkdown
       className={cn('prose lg:prose-xl', className)}
       remarkPlugins={remarkPlugins}
+      remarkRehypeOptions={remarkRehypeOptions}
       rehypePlugins={rehypePlugins}
       components={{
         ...alertComponents, // add alert components

frontend/tests/content.spec.tsx

@@ -104,3 +104,42 @@ it('highlights sources containing regex characters correctly', () => {
   expect(getByRole('link', { name: 'source(12)' })).toBeInTheDocument();
   expect(getByRole('link', { name: 'page{12}' })).toBeInTheDocument();
 });
+
+it('preserves natural-language colons parsed as text directives', () => {
+  const content = '💬 TV:n är stor; FN:s huvudkontor; foo:bar';
+  const { container } = render(
+    <MessageContent
+      message={{
+        threadId: 'test',
+        type: 'assistant_message',
+        output: content,
+        id: 'text-directive',
+        name: 'Assistant',
+        createdAt: 0
+      }}
+      elements={[]}
+    />
+  );
+
+  expect(container.textContent).toBe(content);
+});
+
+it('preserves the complete syntax of unhandled text directives', () => {
+  const content =
+    'A :abbr[lovely language]{title="HyperText Markup Language"}.';
+  const { container } = render(
+    <MessageContent
+      message={{
+        threadId: 'test',
+        type: 'assistant_message',
+        output: content,
+        id: 'unhandled-text-directive',
+        name: 'Assistant',
+        createdAt: 0
+      }}
+      elements={[]}
+    />
+  );
+
+  expect(container.textContent).toBe(content);
+});