feat: syntax highlighter package (#418)

apps/www/components/shadcn/Shadcn.tsx

@@ -8,21 +8,18 @@ import icon from "@/public/favicon/favicon.svg";
 import type { TooltipContentProps } from "@radix-ui/react-tooltip";
 import Image from "next/image";
 import { type FC } from "react";
-import {
-  makePrismSyntaxHighlighter,
-  makeMarkdownText,
-  Thread,
-} from "@assistant-ui/react-ui";
+import { makeMarkdownText, Thread } from "@assistant-ui/react-ui";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { ModelPicker } from "./ModelPicker";
 import { useSwitchToNewThread } from "@assistant-ui/react";
 import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { makePrismAsyncSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
 
 const MarkdownText = makeMarkdownText({
   remarkPlugins: [remarkGfm],
   components: {
-    SyntaxHighlighter: makePrismSyntaxHighlighter({
+    SyntaxHighlighter: makePrismAsyncSyntaxHighlighter({
       style: coldarkDark,
       customStyle: {
         margin: 0,

apps/www/package.json

@@ -15,6 +15,7 @@
     "@ai-sdk/react": "^0.0.16",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
+    "@assistant-ui/react-syntax-highlighter": "workspace:^",
     "@assistant-ui/react-ui": "workspace:*",
     "@calcom/embed-react": "^1.5.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -51,6 +52,7 @@
     "@types/node": "20.14.9",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/title": "^3.4.3",
     "autoprefixer": "^10.4.19",
     "eslint-config-next": "14.2.4",

packages/cli/package.json

@@ -24,7 +24,7 @@
   ],
   "bin": "./dist/index.js",
   "scripts": {
-    "build": "tsup src/index.ts --format esm --sourcemap"
+    "build": "tsup src/index.ts --format esm --sourcemap --clean"
   },
   "publishConfig": {
     "access": "public",

packages/react-ai-sdk/package.json

@@ -24,7 +24,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap"
+    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
   },
   "dependencies": {
     "tsup": "^8.1.0",
@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@assistant-ui/tsconfig": "workspace:*",
-    "@types/node": "^20.14.9"
+    "eslint-config-next": "14.2.4"
   },
   "publishConfig": {
     "access": "public",

packages/react-hook-form/package.json

@@ -24,16 +24,16 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap"
+    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
   },
   "dependencies": {
     "zod": "^3.23.8"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.3.0",
-    "react-hook-form": "^7.x.x",
     "@types/react": "*",
-    "react": "^18"
+    "react": "^18",
+    "react-hook-form": "^7.x.x"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@assistant-ui/tsconfig": "workspace:*",
-    "@types/node": "^20.14.9",
+    "eslint-config-next": "14.2.4",
     "tsup": "^8.1.0"
   },
   "publishConfig": {

packages/react-markdown/package.json

@@ -24,13 +24,12 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap"
+    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-use-callback-ref": "^1.1.0",
-    "react-markdown": "^9.0.1",
-    "zod": "^3.23.8"
+    "react-markdown": "^9.0.1"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.3.2",
@@ -44,7 +43,7 @@
   },
   "devDependencies": {
     "@assistant-ui/tsconfig": "workspace:*",
-    "@types/node": "^20.14.9",
+    "eslint-config-next": "14.2.4",
     "tsup": "^8.1.0"
   },
   "publishConfig": {

packages/react-syntax-highlighter/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

packages/react-syntax-highlighter/README.md

@@ -0,0 +1,3 @@
+# `@assistant-ui/react-syntax-highlighter`
+
+`react-syntax-highlighter` integration for `@assistant-ui/react`.

packages/react-syntax-highlighter/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@assistant-ui/react-syntax-highlighter",
+  "version": "0.0.1",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
+  },
+  "peerDependencies": {
+    "@assistant-ui/react": "^0.3.2",
+    "@assistant-ui/react-markdown": "^0.0.4",
+    "@types/react": "*",
+    "@types/react-syntax-highlighter": "*",
+    "react": "^18",
+    "react-syntax-highlighter": "^15.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-syntax-highlighter": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@assistant-ui/tsconfig": "workspace:*",
+    "eslint-config-next": "14.2.4",
+    "tsup": "^8.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "homepage": "https://assistant-ui.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Yonom/assistant-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Yonom/assistant-ui/issues"
+  }
+}

packages/react-syntax-highlighter/src/index.ts

@@ -0,0 +1,9 @@
+export {
+  makeSyntaxHighlighter,
+  makeLightSyntaxHighlighter,
+  makeLightAsyncSyntaxHighlighter,
+  makePrismSyntaxHighlighter,
+  makePrismLightSyntaxHighlighter,
+  makePrismAsyncSyntaxHighlighter,
+  makePrismAsyncLightSyntaxHighlighter,
+} from "./react-syntax-highlighter";

packages/react-syntax-highlighter/src/react-syntax-highlighter.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ComponentType, type FC } from "react";
+import SyntaxHighlighter, {
+  Prism,
+  PrismAsync,
+  PrismAsyncLight,
+  PrismLight,
+  Light,
+  LightAsync,
+  SyntaxHighlighterProps as SHP,
+} from "react-syntax-highlighter";
+import type { SyntaxHighlighterProps } from "@assistant-ui/react-markdown";
+
+const makeMakeSyntaxHighlighter =
+  (SyntaxHighlighter: ComponentType<SHP>) =>
+  (config: Omit<SHP, "language" | "children">) => {
+    const PrismSyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
+      components: { Pre, Code },
+      language,
+      code,
+    }) => {
+      return (
+        <SyntaxHighlighter
+          PreTag={Pre}
+          CodeTag={Code}
+          {...config}
+          language={language}
+        >
+          {code}
+        </SyntaxHighlighter>
+      );
+    };
+
+    PrismSyntaxHighlighter.displayName = "PrismSyntaxHighlighter";
+
+    return PrismSyntaxHighlighter;
+  };
+
+export const makeSyntaxHighlighter =
+  makeMakeSyntaxHighlighter(SyntaxHighlighter);
+
+export const makePrismSyntaxHighlighter = makeMakeSyntaxHighlighter(Prism);
+
+export const makePrismAsyncSyntaxHighlighter =
+  makeMakeSyntaxHighlighter(PrismAsync);
+
+export const makePrismAsyncLightSyntaxHighlighter =
+  makeMakeSyntaxHighlighter(PrismAsyncLight);
+
+export const makePrismLightSyntaxHighlighter =
+  makeMakeSyntaxHighlighter(PrismLight);
+
+export const makeLightSyntaxHighlighter = makeMakeSyntaxHighlighter(Light);
+
+export const makeLightAsyncSyntaxHighlighter =
+  makeMakeSyntaxHighlighter(LightAsync);

packages/react-syntax-highlighter/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@assistant-ui/tsconfig/base.json",
+  "compilerOptions": {
+    "paths": {
+      "@assistant-ui/*": ["../../packages/*/src"],
+      "@assistant-ui/react/*": ["../../packages/react/src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

packages/react-ui/src/components/code/code-header.tsx → packages/react-ui/src/components/code-header.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
-import { useThreadConfig } from "../thread-config";
-import { useCopyToClipboard } from "../../utils/useCopyToClipboard";
-import { TooltipIconButton } from "../base";
+import { useThreadConfig } from "./thread-config";
+import { useCopyToClipboard } from "../utils/useCopyToClipboard";
+import { TooltipIconButton } from "./base";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import type { CodeHeaderProps } from "@assistant-ui/react-markdown";
 

packages/react-ui/src/components/index.ts

@@ -90,9 +90,7 @@ export {
 
 export { Text } from "./text";
 
-export { CodeHeader } from "./code/code-header";
-
-export { makePrismSyntaxHighlighter } from "./code/react-syntax-highlighter";
+export { CodeHeader } from "./code-header";
 
 export { makeMarkdownText } from "./markdown-text";
 

packages/react-ui/src/components/markdown-text.tsx

@@ -1,6 +1,6 @@
 import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
 import { TextContentPartProps } from "@assistant-ui/react";
-import { CodeHeader } from "./code/code-header";
+import { CodeHeader } from "./code-header";
 import { MarkdownTextPrimitiveProps } from "@assistant-ui/react-markdown";
 import { FC, memo } from "react";
 

packages/react-ui/tsconfig.json

@@ -5,13 +5,6 @@
       "@assistant-ui/*": ["../../packages/*/src"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "../react-markdown/src/PreOverride.tsx",
-    "../react-markdown/src/CodeOverride.tsx",
-    "../react-markdown/src/syntax-highlighter.tsx"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

packages/react/package.json

@@ -53,7 +53,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap"
+    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
   },
   "dependencies": {
     "@radix-ui/primitive": "^1.1.0",