refactor(chat): update to react-markdown@9 with dependencies

apps/www/package.json

@@ -59,25 +59,27 @@
     "lodash.template": "^4.5.0",
     "lucide-react": "0.214.0",
     "markdown-wasm": "^1.2.0",
+    "mdast-util-gfm-table": "2",
     "next": "13.4.8",
     "next-contentlayer": "0.3.4",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-day-picker": "^8.7.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.2",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
     "react-wrap-balancer": "^0.4.1",
     "recharts": "^2.6.2",
+    "remark": "^14.0.3",
+    "remark-code-import": "^1.2.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "remark-parse": "11",
     "sharp": "^0.31.3",
     "tailwind-merge": "^1.12.0",
     "vaul": "^0.2.0",
-    "zod": "^3.21.4",
-    "remark": "^14.0.3",
-    "remark-code-import": "^1.2.0",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
-    "react-markdown": "^8.0.7",
-    "react-syntax-highlighter": "^15.5.0"
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/lodash.template": "^4.5.1",
@@ -88,7 +90,7 @@
     "@types/react-syntax-highlighter": "^15.5.6",
     "esbuild": "^0.17.19",
     "eslint": "^8.41.0",
-    "mdast-util-toc": "^6.1.1",
+    "mdast-util-toc": "^7.0.0",
     "postcss": "^8.4.24",
     "rehype": "^12.0.1",
     "rehype-autolink-headings": "^6.1.1",

apps/www/registry/default/ui/chat/chat-actions.tsx

@@ -1,13 +1,13 @@
-import { PauseCircle, RefreshCw } from "lucide-react";
+import { PauseCircle, RefreshCw } from "lucide-react"
 
-import { Button } from "../button";
-import { ChatHandler } from "./chat.interface";
+import { Button } from "../button"
+import { ChatHandler } from "./chat.interface"
 
 export default function ChatActions(
   props: Pick<ChatHandler, "stop" | "reload"> & {
-    showReload?: boolean;
-    showStop?: boolean;
-  },
+    showReload?: boolean
+    showStop?: boolean
+  }
 ) {
   return (
     <div className="space-x-4">
@@ -24,5 +24,5 @@ export default function ChatActions(
         </Button>
       )}
     </div>
-  );
+  )
 }

apps/www/registry/default/ui/chat/chat-avatar.tsx

@@ -1,13 +1,13 @@
-import { User2 } from "lucide-react";
-import Image from "next/image";
+import Image from "next/image"
+import { User2 } from "lucide-react"
 
 export default function ChatAvatar({ role }: { role: string }) {
   if (role === "user") {
     return (
       <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-background shadow">
         <User2 className="h-4 w-4" />
       </div>
-    );
+    )
   }
 
   return (
@@ -22,5 +22,5 @@ export default function ChatAvatar({ role }: { role: string }) {
         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"></path>
       </svg>
     </div>
-  );
+  )
 }

apps/www/registry/default/ui/chat/chat-input.tsx

@@ -1,9 +1,10 @@
-import { useState } from "react";
-import { Button } from "../button";
-import FileUploader from "../file-uploader";
-import { Input } from "../input";
-import UploadImagePreview from "../upload-image-preview";
-import { ChatHandler } from "./chat.interface";
+import { useState } from "react"
+
+import { Button } from "../button"
+import FileUploader from "../file-uploader"
+import { Input } from "../input"
+import UploadImagePreview from "../upload-image-preview"
+import { ChatHandler } from "./chat.interface"
 
 export default function ChatInput(
   props: Pick<
@@ -15,44 +16,44 @@ export default function ChatInput(
     | "handleSubmit"
     | "handleInputChange"
   > & {
-    multiModal?: boolean;
-  },
+    multiModal?: boolean
+  }
 ) {
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null)
 
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     if (imageUrl) {
       props.handleSubmit(e, {
         data: { imageUrl: imageUrl },
-      });
-      setImageUrl(null);
-      return;
+      })
+      setImageUrl(null)
+      return
     }
-    props.handleSubmit(e);
-  };
+    props.handleSubmit(e)
+  }
 
-  const onRemovePreviewImage = () => setImageUrl(null);
+  const onRemovePreviewImage = () => setImageUrl(null)
 
   const handleUploadImageFile = async (file: File) => {
     const base64 = await new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = (error) => reject(error);
-    });
-    setImageUrl(base64);
-  };
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = () => resolve(reader.result as string)
+      reader.onerror = (error) => reject(error)
+    })
+    setImageUrl(base64)
+  }
 
   const handleUploadFile = async (file: File) => {
     try {
       if (props.multiModal && file.type.startsWith("image/")) {
-        return await handleUploadImageFile(file);
+        return await handleUploadImageFile(file)
       }
-      props.onFileUpload?.(file);
+      props.onFileUpload?.(file)
     } catch (error: any) {
-      props.onFileError?.(error.message);
+      props.onFileError?.(error.message)
     }
-  };
+  }
 
   return (
     <form
@@ -80,5 +81,5 @@ export default function ChatInput(
         </Button>
       </div>
     </form>
-  );
+  )
 }

apps/www/registry/default/ui/chat/chat-message.tsx

@@ -1,13 +1,13 @@
-import { Check, Copy } from "lucide-react";
+import { Check, Copy } from "lucide-react"
 
-import { Button } from "../button";
-import ChatAvatar from "./chat-avatar";
-import { Message } from "./chat.interface";
-import Markdown from "./markdown";
-import { useCopyToClipboard } from "./use-copy-to-clipboard";
+import { Button } from "../button"
+import ChatAvatar from "./chat-avatar"
+import { Message } from "./chat.interface"
+import Markdown from "./markdown"
+import { useCopyToClipboard } from "./use-copy-to-clipboard"
 
 export default function ChatMessage(chatMessage: Message) {
-  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
   return (
     <div className="flex items-start gap-4 pr-5 pt-5">
       <ChatAvatar role={chatMessage.role} />
@@ -29,5 +29,5 @@ export default function ChatMessage(chatMessage: Message) {
         </Button>
       </div>
     </div>
-  );
+  )
 }

apps/www/registry/default/ui/chat/chat-messages.tsx

@@ -1,32 +1,32 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react"
 
-import ChatActions from "./chat-actions";
-import ChatMessage from "./chat-message";
-import { ChatHandler } from "./chat.interface";
+import ChatActions from "./chat-actions"
+import ChatMessage from "./chat-message"
+import { ChatHandler } from "./chat.interface"
 
 export default function ChatMessages(
-  props: Pick<ChatHandler, "messages" | "isLoading" | "reload" | "stop">,
+  props: Pick<ChatHandler, "messages" | "isLoading" | "reload" | "stop">
 ) {
-  const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
-  const messageLength = props.messages.length;
-  const lastMessage = props.messages[messageLength - 1];
+  const scrollableChatContainerRef = useRef<HTMLDivElement>(null)
+  const messageLength = props.messages.length
+  const lastMessage = props.messages[messageLength - 1]
 
   const scrollToBottom = () => {
     if (scrollableChatContainerRef.current) {
       scrollableChatContainerRef.current.scrollTop =
-        scrollableChatContainerRef.current.scrollHeight;
+        scrollableChatContainerRef.current.scrollHeight
     }
-  };
+  }
 
   const isLastMessageFromAssistant =
-    messageLength > 0 && lastMessage?.role !== "user";
+    messageLength > 0 && lastMessage?.role !== "user"
   const showReload =
-    props.reload && !props.isLoading && isLastMessageFromAssistant;
-  const showStop = props.stop && props.isLoading;
+    props.reload && !props.isLoading && isLastMessageFromAssistant
+  const showStop = props.stop && props.isLoading
 
   useEffect(() => {
-    scrollToBottom();
-  }, [messageLength, lastMessage]);
+    scrollToBottom()
+  }, [messageLength, lastMessage])
 
   return (
     <div className="w-full rounded-xl bg-white p-4 shadow-xl pb-0">
@@ -47,5 +47,5 @@ export default function ChatMessages(
         />
       </div>
     </div>
-  );
+  )
 }

apps/www/registry/default/ui/chat/chat.interface.ts

@@ -1,22 +1,22 @@
 export interface Message {
-  id: string;
-  content: string;
-  role: string;
+  id: string
+  content: string
+  role: string
 }
 
 export interface ChatHandler {
-  messages: Message[];
-  input: string;
-  isLoading: boolean;
+  messages: Message[]
+  input: string
+  isLoading: boolean
   handleSubmit: (
     e: React.FormEvent<HTMLFormElement>,
     ops?: {
-      data?: any;
-    },
-  ) => void;
-  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  reload?: () => void;
-  stop?: () => void;
-  onFileUpload?: (file: File) => Promise<void>;
-  onFileError?: (errMsg: string) => void;
+      data?: any
+    }
+  ) => void
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  reload?: () => void
+  stop?: () => void
+  onFileUpload?: (file: File) => Promise<void>
+  onFileError?: (errMsg: string) => void
 }

apps/www/registry/default/ui/chat/index.ts

@@ -1,5 +1,5 @@
-import ChatInput from "./chat-input";
-import ChatMessages from "./chat-messages";
+import ChatInput from "./chat-input"
+import ChatMessages from "./chat-messages"
 
-export { type ChatHandler, type Message } from "./chat.interface";
-export { ChatMessages, ChatInput };
+export { type ChatHandler, type Message } from "./chat.interface"
+export { ChatMessages, ChatInput }

apps/www/registry/default/ui/chat/markdown.tsx

@@ -21,8 +21,8 @@ export default function Markdown({ content }: { content: string }) {
         p({ children }) {
           return <p className="mb-2 last:mb-0">{children}</p>
         },
-        code({ node, inline, className, children, ...props }) {
-          if (children.length) {
+        code({ node, className, children, ...props }) {
+          if (Array.isArray(children) && children.length) {
             if (children[0] == "▍") {
               return (
                 <span className="mt-1 animate-pulse cursor-default">▍</span>
@@ -32,16 +32,15 @@ export default function Markdown({ content }: { content: string }) {
             children[0] = (children[0] as string).replace("`▍`", "▍")
           }
 
+          return (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          )
+        },
+        pre({ node, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || "")
 
-          if (inline) {
-            return (
-              <code className={className} {...props}>
-                {children}
-              </code>
-            )
-          }
-
           return (
             <CodeBlock
               key={Math.random()}

apps/www/registry/default/ui/chat/use-copy-to-clipboard.tsx

@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
 
 export interface useCopyToClipboardProps {
   timeout?: number
 }
 
 export function useCopyToClipboard({
-  timeout = 2000
+  timeout = 2000,
 }: useCopyToClipboardProps) {
   const [isCopied, setIsCopied] = React.useState<Boolean>(false)
 
   const copyToClipboard = (value: string) => {
-    if (typeof window === 'undefined' || !navigator.clipboard?.writeText) {
+    if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
       return
     }