From 42fbe636a7163dc83337efb1bdf46de0ab06a102 Mon Sep 17 00:00:00 2001
From: thivy <thivyakanth@gmail.com>
Date: Thu, 2 Nov 2023 16:04:05 +1100
Subject: [PATCH 1/2] Remove code-block component and add fence component to
 markdown config

---
 src/components/chat/code-block.tsx     | 80 --------------------------
 src/components/markdown/code-block.tsx | 32 +++++++++++
 src/components/markdown/config.tsx     |  4 +-
 src/components/markdown/markdown.tsx   |  3 +-
 4 files changed, 37 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/chat/code-block.tsx
 create mode 100644 src/components/markdown/code-block.tsx

diff --git a/src/components/chat/code-block.tsx b/src/components/chat/code-block.tsx
deleted file mode 100644
index c61681a83..000000000
--- a/src/components/chat/code-block.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-"use client";
-// https://github.com/vercel-labs/ai-chatbot/blob/main/components/markdown.tsx
-import { FC, memo } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-
-interface Props {
-  language: string;
-  value: string;
-}
-
-interface languageMap {
-  [key: string]: string | undefined;
-}
-
-export const programmingLanguages: languageMap = {
-  javascript: ".js",
-  python: ".py",
-  java: ".java",
-  c: ".c",
-  cpp: ".cpp",
-  "c++": ".cpp",
-  "c#": ".cs",
-  ruby: ".rb",
-  php: ".php",
-  swift: ".swift",
-  "objective-c": ".m",
-  kotlin: ".kt",
-  typescript: ".ts",
-  go: ".go",
-  perl: ".pl",
-  rust: ".rs",
-  scala: ".scala",
-  haskell: ".hs",
-  lua: ".lua",
-  shell: ".sh",
-  sql: ".sql",
-  html: ".html",
-  css: ".css",
-  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
-};
-
-export const generateRandomString = (length: number, lowercase = false) => {
-  const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789"; // excluding similar looking characters like Z, 2, I, 1, O, 0
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return lowercase ? result.toLowerCase() : result;
-};
-
-const CodeBlock: FC<Props> = memo(({ language, value }) => {
-  return (
-    <div className="codeblock relative w-full font-sans">
-      <SyntaxHighlighter
-        language={language}
-        style={coldarkDark}
-        PreTag="div"
-        showLineNumbers
-        customStyle={{
-          margin: 0,
-          width: "100%",
-          background: "transparent",
-          padding: "1.5rem 1rem",
-        }}
-        codeTagProps={{
-          style: {
-            fontSize: "0.9rem",
-            fontFamily: "var(--font-mono)",
-          },
-        }}
-      >
-        {value}
-      </SyntaxHighlighter>
-    </div>
-  );
-});
-CodeBlock.displayName = "CodeBlock";
-
-export { CodeBlock };
diff --git a/src/components/markdown/code-block.tsx b/src/components/markdown/code-block.tsx
new file mode 100644
index 000000000..d8616902c
--- /dev/null
+++ b/src/components/markdown/code-block.tsx
@@ -0,0 +1,32 @@
+"use client";
+import { FC, memo } from "react";
+import { Prism } from "react-syntax-highlighter";
+import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+export const fence = {
+  render: "CodeBlock",
+  attributes: {
+    language: {
+      type: String,
+    },
+    value: {
+      type: String,
+    },
+  },
+};
+
+interface Props {
+  language: string;
+  children: string;
+}
+
+export const CodeBlock: FC<Props> = memo(({ language, children }) => {
+  console.log(language);
+  return (
+    <Prism language={language} style={atomDark} PreTag="pre" showLineNumbers>
+      {children}
+    </Prism>
+  );
+});
+
+CodeBlock.displayName = "CodeBlock";
diff --git a/src/components/markdown/config.tsx b/src/components/markdown/config.tsx
index a5bf9d06f..7c1d92de0 100644
--- a/src/components/markdown/config.tsx
+++ b/src/components/markdown/config.tsx
@@ -1,10 +1,12 @@
 import { citation } from "@/features/chat/chat-ui/markdown/citation";
 import { Config } from "@markdoc/markdoc";
+import { fence } from "./code-block";
 import { paragraph } from "./paragraph";
 
 export const citationConfig: Config = {
   nodes: {
-    paragraph: paragraph,
+    paragraph,
+    fence,
   },
   tags: {
     citation,
diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx
index 4a36f564e..bfd4d3326 100644
--- a/src/components/markdown/markdown.tsx
+++ b/src/components/markdown/markdown.tsx
@@ -1,6 +1,7 @@
 import Markdoc from "@markdoc/markdoc";
 import React, { FC } from "react";
 import { Citation } from "../../features/chat/chat-ui/markdown/citation";
+import { CodeBlock } from "./code-block";
 import { citationConfig } from "./config";
 import { Paragraph } from "./paragraph";
 
@@ -16,6 +17,6 @@ export const Markdown: FC<Props> = (props) => {
   });
 
   return Markdoc.renderers.react(content, React, {
-    components: { Citation, Paragraph },
+    components: { Citation, Paragraph, CodeBlock },
   });
 };

From fbe34024bb410dad2cfe438600fc4d1155a28428 Mon Sep 17 00:00:00 2001
From: thivy <thivyakanth@gmail.com>
Date: Thu, 2 Nov 2023 16:27:28 +1100
Subject: [PATCH 2/2] fix error using client code

---
 src/components/markdown/code-block.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/markdown/code-block.tsx b/src/components/markdown/code-block.tsx
index d8616902c..0ef554219 100644
--- a/src/components/markdown/code-block.tsx
+++ b/src/components/markdown/code-block.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { FC, memo } from "react";
 import { Prism } from "react-syntax-highlighter";
 import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";