Add collapsible code step component

- Create Step component to wrap code snippets in collapsible box
- Render Step instead of default code block for 'step' language
- Pass code snippet as children prop to Step
- Step renders language tag and toggle button

src/views/components/MessageMarkdown/Step.tsx

@@ -0,0 +1,38 @@
+import { Box, Button, Collapse, Group } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import React from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import LanguageCorner from "./LanguageCorner";
+import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+interface StepProps {
+    language: string;
+    children: string;
+  }
+const Step:  React.FC<StepProps> = (props) => {
+    const {language,children} = props;
+    const [opened, { toggle }] = useDisclosure(false);
+  
+    return (
+      <Box maw={400} mx="auto">
+        <Group mb={5}>
+          <Button onClick={toggle}>Toggle content</Button>
+        </Group>
+  
+        <Collapse in={opened}>
+            <div style={{ position: 'relative' }}>
+                <LanguageCorner language={language} />
+                <SyntaxHighlighter {...props}
+                    language={language}
+                    customStyle={{ padding: '3em 1em 1em 2em' }}
+                    style={okaidia}
+                    PreTag="div">
+                    {children}
+                </SyntaxHighlighter>
+            </div >
+        </Collapse>
+      </Box>
+    );
+  };
+
+  export default Step;

src/views/components/MessageMarkdown/index.tsx

@@ -5,6 +5,7 @@ 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 Step from "./Step";
 import LanguageCorner from "./LanguageCorner";
 import { observer } from "mobx-react-lite";
 import { useMst } from "@/views/stores/RootStore";
@@ -133,6 +134,11 @@ Generate a professionally written and formatted release note in markdown with th
                 if (lanugage === 'markdown' || lanugage === 'text') {
                     wrapLongLines = true;
                 }
+
+                if (lanugage === 'step') {
+                    return <Step language={lanugage}>{value}</Step>;
+                }
+
                 return !inline && lanugage ? (
                     <div style={{ position: 'relative' }}>
                         <LanguageCorner language={lanugage} />