Add language tag component

- Create LanguageCorner component to display language tag
- Update MessageMarkdown to render LanguageCorner
- Pass language prop from Message to LanguageCorner

src/views/components/MessageMarkdown/LanguageCorner.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface LanguageCornerProps {
+  language: string;
+}
+const LanguageCorner: React.FC<LanguageCornerProps> = ({ language }) => {
+  return (
+    <div style={{ position: 'absolute', top: 0, left: 0 }}>
+        {language && (
+            <div style={{
+                backgroundColor: '#333',
+                color: '#fff',
+                padding: '0.2rem 0.5rem',
+                borderRadius: '0.2rem',
+                fontSize: '0.8rem',
+            }}>
+                {language}
+            </div>
+        )}
+    </div>
+  );
+};
+
+export default LanguageCorner;

src/views/components/MessageMarkdown/index.tsx

@@ -1,10 +1,11 @@
-import { Button, Anchor } from "@mantine/core";
+import { Button, Anchor, Stack, Group, Box } from "@mantine/core";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
 import CodeButtons from "./CodeButtons";
+import LanguageCorner from "./LanguageCorner";
 import { observer } from "mobx-react-lite";
 import { useMst } from "@/views/stores/RootStore";
 import { Message } from "@/views/stores/ChatStore";
@@ -19,24 +20,6 @@ const MessageMarkdown = observer((props: MessageMarkdownProps) => {
     const { children } = props;
     const { chat } = useMst();
 
-    const LanguageCorner = (props: any) => {
-        const { language } = props;
-
-        return (<div style={{ position: 'absolute', top: 0, left: 0 }}>
-            {language && (
-                <div style={{
-                    backgroundColor: '#333',
-                    color: '#fff',
-                    padding: '0.2rem 0.5rem',
-                    borderRadius: '0.2rem',
-                    fontSize: '0.8rem',
-                }}>
-                    {language}
-                </div>
-            )}
-        </div>);
-    };
-
     const handleExplain = (value: string | undefined) => {
         console.log(value);
         switch (value) {