fix: markdown code overflow-x + add copy button

apps/www/public/r/chat-message.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "ui/chat-message.tsx",
-      "content": "\"use client\"\n\nimport React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { MarkdownRenderer } from \"@/registry/default/ui/markdown-renderer\"\n\nconst chatBubbleVariants = cva(\n  \"group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]\",\n  {\n    variants: {\n      isUser: {\n        true: \"bg-primary\",\n        false: \"bg-muted\",\n      },\n      animation: {\n        none: \"\",\n        slide: \"duration-300 animate-in fade-in-0\",\n        scale: \"duration-300 animate-in fade-in-0 zoom-in-75\",\n        fade: \"duration-500 animate-in fade-in-0\",\n      },\n    },\n    compoundVariants: [\n      {\n        isUser: true,\n        animation: \"slide\",\n        class: \"slide-in-from-right\",\n      },\n      {\n        isUser: false,\n        animation: \"slide\",\n        class: \"slide-in-from-left\",\n      },\n      {\n        isUser: true,\n        animation: \"scale\",\n        class: \"origin-bottom-right\",\n      },\n      {\n        isUser: false,\n        animation: \"scale\",\n        class: \"origin-bottom-left\",\n      },\n    ],\n  }\n)\n\ntype Animation = VariantProps<typeof chatBubbleVariants>[\"animation\"]\n\nexport interface Message {\n  id: string\n  role: \"user\" | \"assistant\" | (string & {})\n  content: string\n  createdAt?: Date\n  attachments?: File[]\n}\n\nexport interface ChatMessageProps extends Message {\n  showTimeStamp?: boolean\n  animation?: Animation\n  actions?: React.ReactNode\n}\n\nexport const ChatMessage: React.FC<ChatMessageProps> = ({\n  role,\n  content,\n  createdAt,\n  showTimeStamp = false,\n  animation = \"scale\",\n  actions,\n}) => {\n  const isUser = role === \"user\"\n\n  const formattedTime = createdAt?.toLocaleTimeString(\"en-US\", {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  })\n\n  return (\n    <div className={cn(\"flex flex-col\", isUser ? \"items-end\" : \"items-start\")}>\n      <div className={chatBubbleVariants({ isUser, animation })}>\n        <div className={isUser ? \"text-primary-foreground\" : \"text-foreground\"}>\n          <MarkdownRenderer>{content}</MarkdownRenderer>\n        </div>\n\n        {role === \"assistant\" && actions ? (\n          <div className=\"absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 opacity-0 transition-opacity group-hover/message:opacity-100\">\n            {actions}\n          </div>\n        ) : null}\n      </div>\n\n      {showTimeStamp && createdAt ? (\n        <span\n          className={cn(\n            \"mt-1 block px-1 text-xs opacity-50\",\n            animation !== \"none\" && \"duration-500 animate-in fade-in-0\"\n          )}\n        >\n          {formattedTime}\n        </span>\n      ) : null}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { MarkdownRenderer } from \"@/registry/default/ui/markdown-renderer\"\n\nconst chatBubbleVariants = cva(\n  \"group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]\",\n  {\n    variants: {\n      isUser: {\n        true: \"bg-primary\",\n        false: \"bg-muted\",\n      },\n      animation: {\n        none: \"\",\n        slide: \"animate-in fade-in-0 duration-300\",\n        scale: \"animate-in fade-in-0 zoom-in-75 duration-300\",\n        fade: \"animate-in fade-in-0 duration-500\",\n      },\n    },\n    compoundVariants: [\n      {\n        isUser: true,\n        animation: \"slide\",\n        class: \"slide-in-from-right\",\n      },\n      {\n        isUser: false,\n        animation: \"slide\",\n        class: \"slide-in-from-left\",\n      },\n      {\n        isUser: true,\n        animation: \"scale\",\n        class: \"origin-bottom-right\",\n      },\n      {\n        isUser: false,\n        animation: \"scale\",\n        class: \"origin-bottom-left\",\n      },\n    ],\n  }\n)\n\ntype Animation = VariantProps<typeof chatBubbleVariants>[\"animation\"]\n\nexport interface Message {\n  id: string\n  role: \"user\" | \"assistant\" | (string & {})\n  content: string\n  createdAt?: Date\n  attachments?: File[]\n}\n\nexport interface ChatMessageProps extends Message {\n  showTimeStamp?: boolean\n  animation?: Animation\n  actions?: React.ReactNode\n}\n\nexport const ChatMessage: React.FC<ChatMessageProps> = ({\n  role,\n  content,\n  createdAt,\n  showTimeStamp = false,\n  animation = \"scale\",\n  actions,\n}) => {\n  const isUser = role === \"user\"\n\n  const formattedTime = createdAt?.toLocaleTimeString(\"en-US\", {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  })\n\n  return (\n    <div className={cn(\"flex flex-col\", isUser ? \"items-end\" : \"items-start\")}>\n      <div className={chatBubbleVariants({ isUser, animation })}>\n        <div className={isUser ? \"text-primary-foreground\" : \"text-foreground\"}>\n          <MarkdownRenderer>{content}</MarkdownRenderer>\n        </div>\n\n        {role === \"assistant\" && actions ? (\n          <div className=\"bg-background absolute -bottom-4 right-2 flex space-x-1 rounded-lg border p-1 opacity-0 transition-opacity group-hover/message:opacity-100\">\n            {actions}\n          </div>\n        ) : null}\n      </div>\n\n      {showTimeStamp && createdAt ? (\n        <span\n          className={cn(\n            \"mt-1 block px-1 text-xs opacity-50\",\n            animation !== \"none\" && \"animate-in fade-in-0 duration-500\"\n          )}\n        >\n          {formattedTime}\n        </span>\n      ) : null}\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/markdown-renderer.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "ui/markdown-renderer.tsx",
-      "content": "import Markdown from \"react-markdown\"\nimport remarkGfm from \"remark-gfm\"\n\ninterface MarkdownRendererProps {\n  children: string\n}\n\nexport function MarkdownRenderer({ children }: MarkdownRendererProps) {\n  return (\n    <Markdown\n      remarkPlugins={[remarkGfm]}\n      components={COMPONENTS}\n      className=\"space-y-3\"\n    >\n      {children}\n    </Markdown>\n  )\n}\n\nconst COMPONENTS = {\n  h1: withClass(\"h1\", \"text-2xl font-semibold\"),\n  h2: withClass(\"h2\", \"font-semibold text-xl\"),\n  h3: withClass(\"h3\", \"font-semibold text-lg\"),\n  h4: withClass(\"h4\", \"font-semibold text-base\"),\n  h5: withClass(\"h5\", \"font-medium\"),\n  strong: withClass(\"strong\", \"font-semibold\"),\n  a: withClass(\"a\", \"text-primary underline underline-offset-2\"),\n  blockquote: withClass(\"blockquote\", \"border-l-2 border-primary pl-4\"),\n  code: ({ children, className, node, ...rest }: any) => {\n    return (\n      <code\n        className=\"font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5\"\n        {...rest}\n      >\n        {children}\n      </code>\n    )\n  },\n  ol: withClass(\"ol\", \"list-decimal space-y-2 pl-6\"),\n  ul: withClass(\"ul\", \"list-disc space-y-2 pl-6\"),\n  li: withClass(\"li\", \"my-1.5\"),\n  table: withClass(\n    \"table\",\n    \"w-full border-collapse overflow-y-auto rounded-md border border-foreground/20\"\n  ),\n  th: withClass(\n    \"th\",\n    \"border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  td: withClass(\n    \"td\",\n    \"border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  tr: withClass(\"tr\", \"m-0 border-t p-0 even:bg-muted\"),\n  p: withClass(\"p\", \"whitespace-pre-wrap\"),\n  hr: withClass(\"hr\", \"border-foreground/20\"),\n  pre: withClass(\n    \"pre\",\n    \"rounded-md bg-background/50 p-4 font-mono text-sm border\"\n  ),\n}\n\nfunction withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {\n  const Component = ({ node, ...props }: any) => (\n    <Tag className={classes} {...props} />\n  )\n  Component.displayName = Tag\n  return Component\n}\n",
+      "content": "import React from \"react\"\nimport Markdown from \"react-markdown\"\nimport remarkGfm from \"remark-gfm\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CopyButton } from \"@/registry/default/ui/copy-button\"\n\ninterface MarkdownRendererProps {\n  children: string\n}\n\nexport function MarkdownRenderer({ children }: MarkdownRendererProps) {\n  return (\n    <Markdown\n      remarkPlugins={[remarkGfm]}\n      components={COMPONENTS}\n      className=\"space-y-3\"\n    >\n      {children}\n    </Markdown>\n  )\n}\n\nconst CodeBlock = ({ children, className, ...restProps }: any) => {\n  const code =\n    typeof children === \"string\"\n      ? children\n      : childrenTakeAllStringContents(children)\n\n  return (\n    <div className=\"group/code relative mb-4\">\n      <pre\n        className={cn(\n          \"bg-background/50 overflow-x-scroll rounded-md border p-4 font-mono text-sm [scrollbar-width:none]\",\n          className\n        )}\n        {...restProps}\n      >\n        {children}\n      </pre>\n\n      <div className=\"invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100\">\n        <CopyButton content={code} copyMessage=\"Copied code to clipboard\" />\n      </div>\n    </div>\n  )\n}\n\nfunction childrenTakeAllStringContents(element: any): string {\n  if (typeof element === \"string\") {\n    return element\n  }\n\n  if (element?.props?.children) {\n    let children = element.props.children\n\n    if (Array.isArray(children)) {\n      return children\n        .map((child) => childrenTakeAllStringContents(child))\n        .join(\"\")\n    } else {\n      return childrenTakeAllStringContents(children)\n    }\n  }\n\n  return \"\"\n}\n\nconst COMPONENTS = {\n  h1: withClass(\"h1\", \"text-2xl font-semibold\"),\n  h2: withClass(\"h2\", \"font-semibold text-xl\"),\n  h3: withClass(\"h3\", \"font-semibold text-lg\"),\n  h4: withClass(\"h4\", \"font-semibold text-base\"),\n  h5: withClass(\"h5\", \"font-medium\"),\n  strong: withClass(\"strong\", \"font-semibold\"),\n  a: withClass(\"a\", \"text-primary underline underline-offset-2\"),\n  blockquote: withClass(\"blockquote\", \"border-l-2 border-primary pl-4\"),\n  code: ({ children, className, node, ...rest }: any) => {\n    const match = /language-(\\w+)/.exec(className || \"\")\n    return match ? (\n      <CodeBlock className={className} {...rest}>\n        {children}\n      </CodeBlock>\n    ) : (\n      <code\n        className={cn(\n          \"[:not(pre)>&]:bg-background/50 font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5\"\n        )}\n        {...rest}\n      >\n        {children}\n      </code>\n    )\n  },\n  pre: ({ children }: any) => children,\n  ol: withClass(\"ol\", \"list-decimal space-y-2 pl-6\"),\n  ul: withClass(\"ul\", \"list-disc space-y-2 pl-6\"),\n  li: withClass(\"li\", \"my-1.5\"),\n  table: withClass(\n    \"table\",\n    \"w-full border-collapse overflow-y-auto rounded-md border border-foreground/20\"\n  ),\n  th: withClass(\n    \"th\",\n    \"border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  td: withClass(\n    \"td\",\n    \"border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  tr: withClass(\"tr\", \"m-0 border-t p-0 even:bg-muted\"),\n  p: withClass(\"p\", \"whitespace-pre-wrap\"),\n  hr: withClass(\"hr\", \"border-foreground/20\"),\n}\n\nfunction withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {\n  const Component = ({ node, ...props }: any) => (\n    <Tag className={classes} {...props} />\n  )\n  Component.displayName = Tag\n  return Component\n}\n\nexport default MarkdownRenderer\n",
       "type": "registry:ui",
       "target": ""
     }

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

@@ -16,9 +16,9 @@ const chatBubbleVariants = cva(
       },
       animation: {
         none: "",
-        slide: "duration-300 animate-in fade-in-0",
-        scale: "duration-300 animate-in fade-in-0 zoom-in-75",
-        fade: "duration-500 animate-in fade-in-0",
+        slide: "animate-in fade-in-0 duration-300",
+        scale: "animate-in fade-in-0 zoom-in-75 duration-300",
+        fade: "animate-in fade-in-0 duration-500",
       },
     },
     compoundVariants: [
@@ -85,7 +85,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
         </div>
 
         {role === "assistant" && actions ? (
-          <div className="absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 opacity-0 transition-opacity group-hover/message:opacity-100">
+          <div className="bg-background absolute -bottom-4 right-2 flex space-x-1 rounded-lg border p-1 opacity-0 transition-opacity group-hover/message:opacity-100">
             {actions}
           </div>
         ) : null}
@@ -95,7 +95,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
         <span
           className={cn(
             "mt-1 block px-1 text-xs opacity-50",
-            animation !== "none" && "duration-500 animate-in fade-in-0"
+            animation !== "none" && "animate-in fade-in-0 duration-500"
           )}
         >
           {formattedTime}

apps/www/registry/default/ui/markdown-renderer.tsx

@@ -1,6 +1,10 @@
+import React from "react"
 import Markdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 
+import { cn } from "@/lib/utils"
+import { CopyButton } from "@/registry/default/ui/copy-button"
+
 interface MarkdownRendererProps {
   children: string
 }
@@ -17,6 +21,51 @@ export function MarkdownRenderer({ children }: MarkdownRendererProps) {
   )
 }
 
+const CodeBlock = ({ children, className, ...restProps }: any) => {
+  const code =
+    typeof children === "string"
+      ? children
+      : childrenTakeAllStringContents(children)
+
+  return (
+    <div className="group/code relative mb-4">
+      <pre
+        className={cn(
+          "bg-background/50 overflow-x-scroll rounded-md border p-4 font-mono text-sm [scrollbar-width:none]",
+          className
+        )}
+        {...restProps}
+      >
+        {children}
+      </pre>
+
+      <div className="invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100">
+        <CopyButton content={code} copyMessage="Copied code to clipboard" />
+      </div>
+    </div>
+  )
+}
+
+function childrenTakeAllStringContents(element: any): string {
+  if (typeof element === "string") {
+    return element
+  }
+
+  if (element?.props?.children) {
+    let children = element.props.children
+
+    if (Array.isArray(children)) {
+      return children
+        .map((child) => childrenTakeAllStringContents(child))
+        .join("")
+    } else {
+      return childrenTakeAllStringContents(children)
+    }
+  }
+
+  return ""
+}
+
 const COMPONENTS = {
   h1: withClass("h1", "text-2xl font-semibold"),
   h2: withClass("h2", "font-semibold text-xl"),
@@ -27,15 +76,23 @@ const COMPONENTS = {
   a: withClass("a", "text-primary underline underline-offset-2"),
   blockquote: withClass("blockquote", "border-l-2 border-primary pl-4"),
   code: ({ children, className, node, ...rest }: any) => {
-    return (
+    const match = /language-(\w+)/.exec(className || "")
+    return match ? (
+      <CodeBlock className={className} {...rest}>
+        {children}
+      </CodeBlock>
+    ) : (
       <code
-        className="font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
+        className={cn(
+          "[:not(pre)>&]:bg-background/50 font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
+        )}
         {...rest}
       >
         {children}
       </code>
     )
   },
+  pre: ({ children }: any) => children,
   ol: withClass("ol", "list-decimal space-y-2 pl-6"),
   ul: withClass("ul", "list-disc space-y-2 pl-6"),
   li: withClass("li", "my-1.5"),
@@ -54,10 +111,6 @@ const COMPONENTS = {
   tr: withClass("tr", "m-0 border-t p-0 even:bg-muted"),
   p: withClass("p", "whitespace-pre-wrap"),
   hr: withClass("hr", "border-foreground/20"),
-  pre: withClass(
-    "pre",
-    "rounded-md bg-background/50 p-4 font-mono text-sm border"
-  ),
 }
 
 function withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {
@@ -67,3 +120,5 @@ function withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {
   Component.displayName = Tag
   return Component
 }
+
+export default MarkdownRenderer