add language indicator to the code highlighter

src/app/components/code-highlighter.tsx

@@ -2,6 +2,8 @@ import { ReactElement } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import createElement from "react-syntax-highlighter/dist/esm/create-element";
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { cn } from "@/app/common/utils";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
 
 type CodeHighlighterProps = {
   /**
@@ -69,18 +71,18 @@ function rowRenderer({
 
 export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
   return (
-    <div className="text-xs md:text-md">
+    <div className="text-xs md:text-md relative">
+      {/* Language */}
+      <div className="absolute top-0 right-0 p-1 bg-muted rounded-bl-md rounded-tr-md">
+        <span className="text-xs text-muted-foreground">{capitalizeFirstLetter(language)}</span>
+      </div>
+
       <SyntaxHighlighter
+        className={cn("max-h-[600px] !bg-secondary break-all rounded-md", rounded && "rounded-md")}
         language={language}
         style={atomOneDark}
         wrapLongLines
         renderer={rowRenderer}
-        customStyle={{
-          maxHeight: "600px",
-          backgroundColor: "hsl(var(--secondary))",
-          wordBreak: "break-all",
-          borderRadius: rounded ? "0.25rem" : undefined,
-        }}
       >
         {code}
       </SyntaxHighlighter>