Merge pull request #47 from langflow-ai/cz/fix-package-versions

feat: Enhance markdown rendering and dropdown consistency

frontend/components/knowledge-actions-dropdown.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { EllipsisVertical } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { EllipsisVertical } from "lucide-react";
 import { Button } from "./ui/button";
 
 export function KnowledgeActionsDropdown() {
@@ -18,7 +18,9 @@ export function KnowledgeActionsDropdown() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent side="right" sideOffset={-10}>
-        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+        <DropdownMenuItem className="text-destructive focus:text-destructive-foreground focus:bg-destructive">
+          Delete
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

frontend/components/markdown-renderer.tsx

@@ -62,7 +62,7 @@ export const MarkdownRenderer = ({ chatMessage }: MarkdownRendererProps) => {
       <Markdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeMathjax, rehypeRaw]}
-        linkTarget="_blank"
+        urlTransform={(url) => url}
         components={{
           p({ node, ...props }) {
             return <p className="w-fit max-w-full">{props.children}</p>;
@@ -79,7 +79,7 @@ export const MarkdownRenderer = ({ chatMessage }: MarkdownRendererProps) => {
           h3({ node, ...props }) {
             return <h3 className="mb-2 mt-4">{props.children}</h3>;
           },
-          hr({ node, ...props }) {
+          hr() {
             return <hr className="w-full mt-4 mb-8" />;
           },
           ul({ node, ...props }) {
@@ -97,8 +97,12 @@ export const MarkdownRenderer = ({ chatMessage }: MarkdownRendererProps) => {
               </div>
             );
           },
+          a({ node, ...props }) {
+            return <a {...props} target="_blank" rel="noopener noreferrer">{props.children}</a>;
+          },
 
-          code: ({ node, className, inline, children, ...props }) => {
+          code(props) {
+            const { children, className, ...rest } = props;
             let content = children as string;
             if (
               Array.isArray(children) &&
@@ -120,14 +124,15 @@ export const MarkdownRenderer = ({ chatMessage }: MarkdownRendererProps) => {
               }
 
               const match = /language-(\w+)/.exec(className || "");
+              const isInline = !className?.startsWith("language-");
 
-              return !inline ? (
+              return !isInline ? (
                 <CodeComponent
                   language={(match && match[1]) || ""}
                   code={String(content).replace(/\n$/, "")}
                 />
               ) : (
-                <code className={className} {...props}>
+                <code className={className} {...rest}>
                   {content}
                 </code>
               );

frontend/package.json

@@ -38,11 +38,11 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
-    "react-markdown": "^8.0.7",
+    "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
-    "rehype-mathjax": "^4.0.3",
-    "rehype-raw": "^6.1.1",
-    "remark-gfm": "3.0.1",
+    "rehype-mathjax": "^7.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
@@ -53,6 +53,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.21",
     "eslint": "^9",
     "eslint-config-next": "15.3.5",