WIP first pass remark-directive

client/package.json

@@ -80,7 +80,7 @@
     "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.43.9",
     "react-lazy-load-image-component": "^1.6.0",
-    "react-markdown": "^8.0.6",
+    "react-markdown": "^9.0.1",
     "react-resizable-panels": "^1.0.9",
     "react-router-dom": "^6.11.2",
     "react-speech-recognition": "^3.10.0",
@@ -90,8 +90,9 @@
     "regenerator-runtime": "^0.14.1",
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.2",
-    "rehype-raw": "^6.1.1",
-    "remark-gfm": "^3.0.1",
+    "rehype-raw": "^7.0.0",
+    "remark-directive": "^3.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-math": "^5.1.1",
     "remark-supersub": "^1.0.0",
     "tailwind-merge": "^1.9.1",

client/src/components/Artifacts/Artifact.tsx

@@ -0,0 +1,34 @@
+import { visit } from 'unist-util-visit';
+import type { Plugin } from 'unified';
+import type { Root } from 'mdast';
+
+export function artifactPlugin() {
+  return (tree) => {
+    visit(
+      tree,
+      ['textDirective', 'leafDirective', 'containerDirective'],
+      (node) => {
+        node.data = {
+          hName: node.name,
+          hProperties: node.attributes,
+          ...node.data,
+        };
+        return node;
+      },
+    );
+  };
+}
+
+export function artifact({ node, ...props }) {
+  // if (props.className === 'artifact') {
+  console.dir(props, { depth: null });
+  return (
+    <div className="artifact">
+      <h3>{props.dataIdentifier}</h3>
+      <p>Type: {props.dataType}</p>
+      {props.children}
+    </div>
+  );
+  // }
+  // return <div {...props} />;
+}

client/src/components/Artifacts/Code.tsx

@@ -145,7 +145,7 @@ export const CodeMarkdown = memo(({ content = '', showCursor, isLatestMessage }:
   return (
     <ReactMarkdown
       rehypePlugins={rehypePlugins}
-      linkTarget="_new"
+      // linkTarget="_new"
       components={{ code }
       }
     >

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -7,9 +7,11 @@ import { useRecoilValue } from 'recoil';
 import { visit } from 'unist-util-visit';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
+import remarkDirective from 'remark-directive';
 import type { PluggableList, Pluggable } from 'unified';
 import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
 import { CodeBlockArtifact, CodeMarkdown } from '~/components/Artifacts/Code';
+import { artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
 import { useFileDownload } from '~/data-provider';
 import { filenameMap } from '~/utils/artifacts';
@@ -123,6 +125,19 @@ export const p: React.ElementType = memo(({ children }: { children: React.ReactN
   return <p className="mb-2 whitespace-pre-wrap">{children}</p>;
 });
 
+export const div: React.ElementType = memo(({ node, ...props }) => {
+  if (props.className === 'artifact') {
+    return (
+      <div className="artifact">
+        <h3>{props['data-identifier']}</h3>
+        <p>Type: {props['data-type']}</p>
+        {props.children}
+      </div>
+    );
+  }
+  return <div {...props} />;
+});
+
 const cursor = ' ';
 
 type TContentProps = {
@@ -187,14 +202,19 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
 
   return (
     <ReactMarkdown
-      remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
+      remarkPlugins={[
+        remarkDirective,
+        supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }],
+        artifactPlugin,
+      ]}
       rehypePlugins={rehypePlugins}
-      linkTarget="_new"
+      // linkTarget="_new"
       components={
         {
           code,
           a,
           p,
+          artifact,
         }
       }
     >

client/src/components/Chat/Messages/Content/MarkdownLite.tsx

@@ -26,7 +26,7 @@ const MarkdownLite = memo(({ content = '' }: { content?: string }) => {
     <ReactMarkdown
       remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
       rehypePlugins={rehypePlugins}
-      linkTarget="_new"
+      // linkTarget="_new"
       components={
         {
           code,