feat(react-sdk): enriched markdown component

examples/nextjs-ai-chatbot/app/globals.css

@@ -1,3 +1,4 @@
+@import url('./rsh-dark.css') layer(syntax-highlighter);
 @import 'tailwindcss';
 @plugin "@tailwindcss/typography";
 @plugin "daisyui" {
@@ -12,16 +13,6 @@
   scrollbar-gutter: stable;
 }
 
-pre {
-  display: block !important;
-}
-
-pre pre {
-  border: none !important;
-  background-color: transparent !important;
-  box-shadow: none !important;
-}
-
 .ai-thinking {
   background: linear-gradient(90deg, #00ffe0, #0072ff, #00ffe0);
   background-size: 200% auto;

examples/nextjs-ai-chatbot/app/rsh-dark.css

@@ -0,0 +1,152 @@
+code[class*='language-'] {
+  color: white;
+  hyphens: none;
+  tab-size: 4;
+  font-size: 1em;
+  word-wrap: normal;
+  background: none;
+  text-align: left;
+  word-break: normal;
+  -ms-hyphens: none;
+  -o-tab-size: 4;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  line-height: 1.5;
+  text-shadow: 0 -0.1em 0.2em black;
+  white-space: pre;
+  -moz-hyphens: none;
+  word-spacing: normal;
+  -moz-tab-size: 4;
+  -webkit-hyphens: none;
+}
+pre[class*='language-'] {
+  color: white;
+  border: 0.3em solid hsl(30, 20%, 40%);
+  margin: 0.5em 0;
+  hyphens: none;
+  padding: 1em;
+  overflow: auto;
+  tab-size: 4;
+  font-size: 1em;
+  word-wrap: normal;
+  background: hsl(30, 20%, 25%);
+  box-shadow: 1px 1px 0.5em black inset;
+  text-align: left;
+  word-break: normal;
+  -ms-hyphens: none;
+  -o-tab-size: 4;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  line-height: 1.5;
+  text-shadow: 0 -0.1em 0.2em black;
+  white-space: pre;
+  -moz-hyphens: none;
+  word-spacing: normal;
+  -moz-tab-size: 4;
+  border-radius: 0.5em;
+  -webkit-hyphens: none;
+}
+:not(pre) > code[class*='language-'] {
+  border: 0.13em solid hsl(30, 20%, 40%);
+  padding: 0.15em 0.2em 0.05em;
+  background: hsl(30, 20%, 25%);
+  box-shadow: 1px 1px 0.3em -0.1em black inset;
+  white-space: normal;
+  border-radius: 0.3em;
+}
+.comment {
+  color: hsl(30, 20%, 50%);
+}
+.prolog {
+  color: hsl(30, 20%, 50%);
+}
+.doctype {
+  color: hsl(30, 20%, 50%);
+}
+.cdata {
+  color: hsl(30, 20%, 50%);
+}
+.punctuation {
+  -opacity: 0.7;
+}
+.namespace {
+  -opacity: 0.7;
+}
+.property {
+  color: hsl(350, 40%, 70%);
+}
+.tag {
+  color: hsl(350, 40%, 70%);
+}
+.boolean {
+  color: hsl(350, 40%, 70%);
+}
+.number {
+  color: hsl(350, 40%, 70%);
+}
+.constant {
+  color: hsl(350, 40%, 70%);
+}
+.symbol {
+  color: hsl(350, 40%, 70%);
+}
+.selector {
+  color: hsl(75, 70%, 60%);
+}
+.attr-name {
+  color: hsl(75, 70%, 60%);
+}
+.string {
+  color: hsl(75, 70%, 60%);
+}
+.char {
+  color: hsl(75, 70%, 60%);
+}
+.builtin {
+  color: hsl(75, 70%, 60%);
+}
+.inserted {
+  color: hsl(75, 70%, 60%);
+}
+.operator {
+  color: hsl(40, 90%, 60%);
+}
+.entity {
+  color: hsl(40, 90%, 60%);
+  cursor: help;
+}
+.url {
+  color: hsl(40, 90%, 60%);
+}
+.language-css .token.string {
+  color: hsl(40, 90%, 60%);
+}
+.style .token.string {
+  color: hsl(40, 90%, 60%);
+}
+.variable {
+  color: hsl(40, 90%, 60%);
+}
+.atrule {
+  color: hsl(350, 40%, 70%);
+}
+.attr-value {
+  color: hsl(350, 40%, 70%);
+}
+.keyword {
+  color: hsl(350, 40%, 70%);
+}
+.regex {
+  color: #e90;
+}
+.important {
+  color: #e90;
+  font-weight: bold;
+}
+.bold {
+  font-weight: bold;
+}
+.italic {
+  font-style: italic;
+}
+.deleted {
+  color: red;
+}

examples/nextjs-ai-chatbot/components/messages.tsx

@@ -8,6 +8,9 @@ import { useEffect, useRef } from 'react';
 import { useParams } from 'next/navigation';
 import Image from 'next/image';
 import ToolsOutput from './tools';
+import { AIMarkdown } from '@stream-io/ai-components-react';
+import Weather from './tools/weather';
+import clsx from 'clsx';
 
 export default function Messages() {
   const { messages, status, isLoadingMessages } = useApp();
@@ -81,11 +84,48 @@ export default function Messages() {
                 : 'max-w-full overflow-scroll'
             }`}
           >
-            <Markdown>
+            <AIMarkdown
+              toolComponents={{
+                'ai-tool-weather': Weather,
+              }}
+              markdownComponents={{
+                p: ({ children }) => <div className="no-prose">{children}</div>,
+                code: ({ children, ...rest }) => (
+                  <AIMarkdown.default.code
+                    {...rest}
+                    className={clsx(
+                      rest.className,
+                      'text-sm py-0.5 px-1 rounded',
+                    )}
+                  >
+                    {children}
+                  </AIMarkdown.default.code>
+                ),
+                ol: ({ node, children, ...props }) => (
+                  <ol className="list-decimal list-inside ml-4" {...props}>
+                    {children}
+                  </ol>
+                ),
+                li: ({ node, children, ...props }) => {
+                  return (
+                    <li className="py-1" {...props}>
+                      {children}
+                    </li>
+                  );
+                },
+                ul: ({ node, children, ...props }) => {
+                  return (
+                    <ul className="list-decimal list-inside ml-4" {...props}>
+                      {children}
+                    </ul>
+                  );
+                },
+              }}
+            >
               {m.parts
                 .map((part: any) => (part.type === 'text' ? part.text : ''))
                 .join('')}
-            </Markdown>
+            </AIMarkdown>
             <ToolsOutput parts={m.parts} />
           </div>
         </div>

examples/nextjs-ai-chatbot/package.json

@@ -13,10 +13,12 @@
     "@ai-sdk/openai": "^2.0.53",
     "@ai-sdk/react": "^2.0.76",
     "@ai-sdk/xai": "^2.0.27",
+    "@stream-io/ai-components-react": "workspace:^",
     "@stream-io/ai-sdk-storage": "workspace:^",
     "@tailwindcss/typography": "^0.5.19",
     "ai": "^5.0.76",
     "animate.css": "^4.1.1",
+    "clsx": "^2.1.1",
     "daisyui": "^5.3.7",
     "lucide-react": "^0.546.0",
     "next": "16.0.0",

packages/react-sdk/package.json

@@ -9,15 +9,15 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "browser": {
-        "import": "./dist/esm/index.mjs",
+        "import": "./dist/es/index.mjs",
         "require": "./dist/cjs/index.js"
       },
       "default": "./dist/cjs/index.js"
     },
     "./stream": {
       "types": "./dist/types/stream/index.d.ts",
       "browser": {
-        "import": "./dist/esm/stream/index.mjs",
+        "import": "./dist/es/stream/index.mjs",
         "require": "./dist/cjs/stream/index.js"
       },
       "default": "./dist/cjs/stream/index.js"
@@ -29,9 +29,11 @@
     "!src/*.test.ts"
   ],
   "scripts": {
-    "build": "rimraf ./dist && concurrently 'vite build' 'tsc -p ./tsconfig.lib.json'",
+    "build": "rimraf ./dist && concurrently 'vite build' 'tsc -p ./tsconfig.lib.json' 'pnpm run build:styles'",
+    "build:styles": "exit 0",
+    "dev": "concurrently 'vite build --watch' 'tsc -p ./tsconfig.lib.json' --watch",
     "prepare": "pnpm run build",
-    "test": "vitest"
+    "test": ""
   },
   "keywords": [
     "ai",
@@ -50,13 +52,22 @@
     "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@types/react": "^17",
-    "@types/react-dom": "^17",
     "@types/node": "^24",
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "concurrently": "catalog:",
-    "vite": "catalog:",
     "rimraf": "^6.0.1",
     "typescript": "catalog:",
+    "vite": "catalog:",
     "vitest": "catalog:"
+  },
+  "dependencies": {
+    "chart.js": "^4.5.1",
+    "clsx": "^2.1.1",
+    "react-chartjs-2": "^5.3.1",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "15.5.0",
+    "remark-gfm": "^4.0.1"
   }
 }

packages/react-sdk/src/components/ErrorBoundary.tsx

@@ -0,0 +1,27 @@
+import { Component, type PropsWithChildren, type ReactNode } from 'react';
+
+type ErrorBoundaryProps = PropsWithChildren<{ fallback: ReactNode }>;
+
+export default class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  { hasError: boolean }
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  override render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}