Migrate React Markdown to Streamdown

examples/ai-chatbot/README.md

@@ -30,7 +30,7 @@ To get started with Langbase, you'll need to [create a free personal account on
 
 1. Fork the [AI Chatbot][pipe] Pipe on ⌘ Langbase.
 2. Go to Langbase API keys page and [generate an API key][api-key] (to be used on server-side only).
-3. Download the example project folder from [here][download] or clone the reppository.
+3. Download the example project folder from [here][download] or clone the repository.
 4. `cd` into the project directory and open it in your code editor.
 5. Duplicate the `.env.example` file in this project and rename it to `.env.local`.
 6. Add the following environment variables:

examples/ai-chatbot/components/chat-message.tsx

@@ -1,10 +1,7 @@
 import { Message } from '@baseai/core'
-import remarkGfm from 'remark-gfm'
-import remarkMath from 'remark-math'
+import { Streamdown } from 'streamdown'
 
 import { ChatMessageActions } from '@/components/chat-message-actions'
-import { MemoizedReactMarkdown } from '@/components/markdown'
-import { CodeBlock } from '@/components/ui/codeblock'
 import { IconSparkles, IconUser } from '@/components/ui/icons'
 import cn from 'mxcn'
 
@@ -29,47 +26,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
         {message.role === 'user' ? <IconUser /> : <IconSparkles />}
       </div>
       <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
-        <MemoizedReactMarkdown
-          className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 prose-pre:rounded-xl break-words rounded-xl"
-          remarkPlugins={[remarkGfm, remarkMath]}
-          components={{
-            p({ children }) {
-              return <p className="mb-2 last:mb-0">{children}</p>
-            },
-            code({ node, inline, className, children, ...props }) {
-              if (children.length) {
-                if (children[0] == '▍') {
-                  return (
-                    <span className="mt-1 animate-pulse cursor-default">▍</span>
-                  )
-                }
-
-                children[0] = (children[0] as string).replace('`▍`', '▍')
-              }
-
-              const match = /language-(\w+)/.exec(className || '')
-
-              if (inline) {
-                return (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                )
-              }
-
-              return (
-                <CodeBlock
-                  key={Math.random()}
-                  language={(match && match[1]) || ''}
-                  value={String(children).replace(/\n$/, '')}
-                  {...props}
-                />
-              )
-            }
-          }}
-        >
-          {message.content || ''}
-        </MemoizedReactMarkdown>
+        <Streamdown>{message.content}</Streamdown>
         <ChatMessageActions message={message} />
       </div>
     </div>

examples/ai-chatbot/package.json

@@ -20,19 +20,15 @@
 		"next": "14.2.20",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-markdown": "^8.0.7",
-		"react-syntax-highlighter": "^15.6.1",
 		"react-textarea-autosize": "^8.5.6",
-		"remark-gfm": "^3.0.1",
-		"remark-math": "^5.1.1",
-		"sonner": "^1.7.1"
+		"sonner": "^1.7.1",
+		"streamdown": "^1.6.6"
 	},
 	"devDependencies": {
 		"@tailwindcss/typography": "^0.5.15",
 		"@types/node": "^17.0.12",
 		"@types/react": "^18.0.22",
 		"@types/react-dom": "^18.0.7",
-		"@types/react-syntax-highlighter": "^15.5.6",
 		"@typescript-eslint/parser": "^5.59.7",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^8.31.0",