From 950a1328a061ca966695718bb21faba71c3da3c7 Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Wed, 11 Oct 2023 23:51:57 +0800
Subject: [PATCH] Add language tag component

- Create LanguageCorner component to display language tag
- Update MessageMarkdown to render LanguageCorner
- Pass language prop from Message to LanguageCorner
---
 .../MessageMarkdown/LanguageCorner.tsx        | 24 +++++++++++++++++++
 .../components/MessageMarkdown/index.tsx      | 21 ++--------------
 2 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 src/views/components/MessageMarkdown/LanguageCorner.tsx

diff --git a/src/views/components/MessageMarkdown/LanguageCorner.tsx b/src/views/components/MessageMarkdown/LanguageCorner.tsx
new file mode 100644
index 0000000..10d12b4
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/views/components/MessageMarkdown/index.tsx b/src/views/components/MessageMarkdown/index.tsx
index 93c9b8f..79e9d8e 100644
--- a/src/views/components/MessageMarkdown/index.tsx
+++ b/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) {